How can I align this image evenly with my other text?

Dr-Lupo 0
Viewed 22

Looking to align this image on the right with the other text that I have. When I run the code, it pushes the margin down and places the image below the text to the right. Preferably I'd like the image evenly with the top text. Any recommendations to help as well as suggestions for cleaning up code are appreciated.

    <div class="main">
      <h1 class="awesome" <strong>Welcome!</strong></h1>
      <div class="text"<small><p>This website has some subtext that goes here under the main title.</p>
        <p>Its a smaller font and the color is lower.</p> </small> </div>
      <div class="button1"
      <button> Sign Up </button>
      </div>
      <div class="Image">
        <img src="Images/download.jpg"
         alt="Rocket"
      </div>
    </div>
  </div>


.main{
  display: flex;
  flex-direction: column;
   flex-wrap: wrap;
   background-color: #1F2937;
   font-family: 'Roboto';
   margin-bottom: 25px;
   padding-left: 25px;
}

.awesome{
    font-size: 48px;
    font-weight: bolder;
    color: #f9faf8;
}

.text{
    align-self: flex-start;
    color: #f9faf8;
}

.button1{
    font-family: 'Roboto';
    border: black;
    border-radius: 8px;
    padding: 10px;
    width: fit-content;
    height: fit-content;
    background: #3882f6;
}

.Image{
    align-self: flex-end;
  
}
flexbox css html
1 Answers

First I fixed the html you provided a little. Then it's important for a flex container to operate on immediate children. So I wrapped all left side inside a div, against its sibling the image div. The rest is just a little play with the "flexing" properties.

.main {
  display: flex;
  background-color: #1F2937;
  font-family: 'Roboto';
  margin-bottom: 25px;
  padding-left: 25px;
  align-items: start;
}

.awesome {
  font-size: 48px;
  font-weight: bolder;
  color: #f9faf8;
}

.text {
  align-self: flex-start;
  color: #f9faf8;
}

.button1 {
  font-family: 'Roboto';
  border: black;
  border-radius: 8px;
  padding: 10px;
  width: fit-content;
  height: fit-content;
  background: #3882f6;
}

.Image {

}
<div class="main">
  <div class="left-side">
    <h1 class="awesome"> <strong>Welcome!</strong>
    </h1>
    <div class="text"> <small>
    <p>This website has some subtext that goes here under the main title.</p>
    <p>Its a smaller font and the color is lower.</p>
    </small>
    </div>
    <div class="button1"> <button> Sign Up </button>
    </div>
  </div>
  <div class="Image">
    <img src="https://picsum.photos/200" alt="Rocket" </div>
  </div>
</div>

IT goldman0
Related