Attempting to align an image and text next to each other within a container

Question

Attempting to align an image and text next to each other within a container

I've been scouring the web for a solution to my issue, but I can't seem to find one that fits my particular scenario.

Currently, I'm facing an issue where the text and image are stacking on top of each other instead of appearing side by side within the headerBlock div.

#wrap { 
  width: 800px; 
  margin: 0 auto; 
  overflow: hidden;
  float: left;
}

#headerBlock { 
  height: 200px; 
  background:  #776b68; 
}

div.headerText {
  vertical-align: middle;
  text-align: justify;
}

div.headerImg img {
  vertical-align: middle;
}

<div id="wrap">
  <div id="headerBlock">
    <div class="headerText">Some text here</div>
    <div class="headerImg"><img src="/somepicturehere">
    </div>
  </div>

  <!--Ignore these, it's for future use-->
  <div id="leftBlock"></div>

  <div id="rightBlock"></div>

  <div id="footerBlock"></div>

</div>

html css

Answer 1

Answer №1

To achieve the desired effect, set .headerText and .headerImg to have display: inline-block;.

#wrap { 
  width: 800px; 
  margin: 0 auto; 
  overflow: hidden;
  float: left;
}

#headerBlock { 
  height: 200px; 
  background:  #776b68; 
}

div.headerText {
  display: inline-block;
}
div.headerImg {
  display: inline-block;
}
div.headerImg img {
  vertical-align: middle;
}

<div id="wrap">
  <div id="headerBlock">
    <div class="headerText">Some text here</div>
    <div class="headerImg">
      <img src="/somepicturehere">
    </div>
  </div>
  <!--Ignore these, it's for future use-->
  <div id="leftBlock"></div>
  <div id="rightBlock"></div>
  <div id="footerBlock"></div>
</div>

If you want to vertically align them instead, apply display: flex; and align-items: center; on the container:

#wrap { 
  width: 800px; 
  margin: 0 auto; 
  overflow: hidden;
  float: left;
}

#headerBlock { 
  height: 200px; 
  background:  #776b68; 
  display: flex;
  align-items: center;
}

div.headerText {
  display: inline-block;
}
div.headerImg {
  display: inline-block;
}

<div id="wrap">
  <div id="headerBlock">
    <div class="headerText">Some text here</div>
    <div class="headerImg">
      <img src="/somepicturehere">
    </div>
  </div>
  <!--Ignore these, it's for future use-->
  <div id="leftBlock"></div>
  <div id="rightBlock"></div>
  <div id="footerBlock"></div>
</div>

Answer 2

To achieve the desired effect, set .headerText and .headerImg to have display: inline-block;.

#wrap { 
  width: 800px; 
  margin: 0 auto; 
  overflow: hidden;
  float: left;
}

#headerBlock { 
  height: 200px; 
  background:  #776b68; 
}

div.headerText {
  display: inline-block;
}
div.headerImg {
  display: inline-block;
}
div.headerImg img {
  vertical-align: middle;
}

<div id="wrap">
  <div id="headerBlock">
    <div class="headerText">Some text here</div>
    <div class="headerImg">
      <img src="/somepicturehere">
    </div>
  </div>
  <!--Ignore these, it's for future use-->
  <div id="leftBlock"></div>
  <div id="rightBlock"></div>
  <div id="footerBlock"></div>
</div>

If you want to vertically align them instead, apply display: flex; and align-items: center; on the container:

#wrap { 
  width: 800px; 
  margin: 0 auto; 
  overflow: hidden;
  float: left;
}

#headerBlock { 
  height: 200px; 
  background:  #776b68; 
  display: flex;
  align-items: center;
}

div.headerText {
  display: inline-block;
}
div.headerImg {
  display: inline-block;
}

<div id="wrap">
  <div id="headerBlock">
    <div class="headerText">Some text here</div>
    <div class="headerImg">
      <img src="/somepicturehere">
    </div>
  </div>
  <!--Ignore these, it's for future use-->
  <div id="leftBlock"></div>
  <div id="rightBlock"></div>
  <div id="footerBlock"></div>
</div>

Answer 3

Answer №2

To arrange the child elements side by side in a row, use display: flex on the parent element. You can further adjust the alignment using properties like align-items and justify-content.

#wrap { 
width: 800px; 
margin: 0 auto; 
overflow: hidden;
float: left;
}

#headerBlock { 
height: 200px; 
background:  #776b68; 
display: flex;
align-items: center;
}

div.headerText {
text-align: justify;
}

div.headerImg img {
vertical-align: middle;
}

<div id="wrap">
<div id="headerBlock>
    <div class="headerText">Some text here</div>
    <div class="headerImg"><img src="/somepicturehere">
    </div>
</div>

<!--Ignore these, it's for future use-->
<div id="leftBlock"></div>

<div id="rightBlock"></div>

<div id="footerBlock"></div>

</div>

Answer 4

To arrange the child elements side by side in a row, use display: flex on the parent element. You can further adjust the alignment using properties like align-items and justify-content.

#wrap { 
width: 800px; 
margin: 0 auto; 
overflow: hidden;
float: left;
}

#headerBlock { 
height: 200px; 
background:  #776b68; 
display: flex;
align-items: center;
}

div.headerText {
text-align: justify;
}

div.headerImg img {
vertical-align: middle;
}

<div id="wrap">
<div id="headerBlock>
    <div class="headerText">Some text here</div>
    <div class="headerImg"><img src="/somepicturehere">
    </div>
</div>

<!--Ignore these, it's for future use-->
<div id="leftBlock"></div>

<div id="rightBlock"></div>

<div id="footerBlock"></div>

</div>

Attempting to align an image and text next to each other within a container

Answer №1

Answer №2

Similar questions

Flying Saucer core fails to load Bootstrap CSS files when generating a PDF

What causes the differences in properties between @click and @paste?

Tips for personalizing the WordPress menu options located in the header

What is the best way to add styling to my image when hovered over within a link on a responsive website?

Is it possible to deactivate the CSS hover effect using JavaScript?

CSS: the max-width property does not constrain an absolute positioned container from overflowing

Implement CSS to layer HTML 5 canvases while including a margin

Tips for decoding Dropbox Public folder images in HTML

What is the precise width?

Enhancing the appearance of the MUI DatePicker

User account details displayed in the website's header for Prestashop users

Ways to align a form in the middle of a Bootstrap 4 jumbotron

Tips for displaying multiple XML datasets on an HTML webpage

I encountered a limitation in utilizing opacity with my background-image

Arranging React Bootstrap columns in a way that the column on the right appears above the column on the left

Prevent any interaction on a webpage with the help of JavaScript

Is there a way to efficiently pull specific time-related data from XML API forecasts using PHP and present them in HTML tables?

Creating a Tic Tac Toe game using Javascript程序

I am wondering how to use the value assigned to a variable's textContent as an argument for player input in my JavaScript code

What is the best way to insert a vertical line between two 960.gs containers?