Align both text and images in the middle using HTML/CSS

Question

Align both text and images in the middle using HTML/CSS

I attempted to align an image next to text and center everything, but I'm facing some challenges. The arrow indicates where I would prefer the image to be placed.

HTML

<!DOCTYPE html>
  <head>
    <title>Simple Page</title>
    <link rel="stylesheet" type="text/css" href="css/test.css">
  </head>
  <body>    
    <div class="content">
      <div class="cv">
        <p>
          Some text<br>
          Some more text<br>
          etc etc<br>
        </p>
        <p>
          <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a7d3c2d4d3e7c2dfc6cad7cbc289c4c8ca">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9ce8f9efe8dcf9e4fd...  
        </pre><code>-capitalized email addresses for security-            
        </p>
        
        <p>
          Download
          &nbsp;&nbsp;&nbsp;&nbsp;<a href="example-eng.pdf">eng</a>
          &nbsp;&nbsp;&nbsp;&nbsp;<a href="example-deu.pdf">deu</a>
        </p>
      </div>
      <div class="photo">
        <img src="image/dummy.png" alt="dummy">
      </div>
    </div>
  </body>   
</html>

CSS (I made an attempt based on advice from stackoverflow answers)

body {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 150%;
  line-height: 1.6em;
}
.cv {
   display: table;
   margin: 0 auto;
}
.photo {
  float: right;
}

Your feedback is appreciated, and any suggestions or explanations would be helpful in understanding the issue better. Thank you.

html css

Answer 1

Answer №1

Check out the Demo

In accordance with the HTML specifications, <span> is defined as an inline element, while <div> is classified as a block-level element. It's possible to modify this default behavior using the CSS property display. However, there arises an issue regarding HTML validation when trying to place block elements within inline elements:

<span>...<div>foo</div>...</span>

Even if you change the <div> to inline or inline-block, the above structure remains invalid according to standard HTML practices.

Hence, for elements styled as inline or inline-block, it is recommended to use a <span>. On the other hand, for block-level elements, opt for a <div>.

This code snippet showcases the prescribed structure:

<div class="content"> 
    <span id="texxts">
      <div class="cv">
        <p>
          Some text<br>
          Some more text<br>
          etc etc<br>
        </p>
        <p>
          <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c0b4a5b3b480a5b8a1adb0aca5eea3afad">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b3c7d6c0c7f3d6cbd2dec3dfd69dd0dcde">[email protected]</a></a>
        </p>
        <p>
          Download
          &nbsp;&nbsp;&nbsp;&nbsp;<a href="example-eng.pdf">eng</a>
          &nbsp;&nbsp;&nbsp;&nbsp;<a href="example-deu.pdf">deu</a>
        </p>
      </div>
   </span>
   <span>
      <div class="photo">
         <img src="http://webjunction.net/images/avatars/default-avatar.png" alt="dummy">
      </div>
   </span>
</div>

The accompanying CSS styles:

.content {
    margin-bottom:2%;
    text-align: center;
}
.content span {
    display: inline-block;
    vertical-align: middle;
}
.content #texxts {
    border: 1px solid red;
    /* to demonstrate centering */
}
body {
    font-family:'Lato', sans-serif;
    font-weight: 300;
    font-size: 150%;
    line-height: 1.6em;
}
.cv {
    display: table;
    margin: 0 auto;
}
.photo {
    float: right;
}

Answer 2

Check out the Demo

In accordance with the HTML specifications, <span> is defined as an inline element, while <div> is classified as a block-level element. It's possible to modify this default behavior using the CSS property display. However, there arises an issue regarding HTML validation when trying to place block elements within inline elements:

<span>...<div>foo</div>...</span>

Even if you change the <div> to inline or inline-block, the above structure remains invalid according to standard HTML practices.

Hence, for elements styled as inline or inline-block, it is recommended to use a <span>. On the other hand, for block-level elements, opt for a <div>.

This code snippet showcases the prescribed structure:

<div class="content"> 
    <span id="texxts">
      <div class="cv">
        <p>
          Some text<br>
          Some more text<br>
          etc etc<br>
        </p>
        <p>
          <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c0b4a5b3b480a5b8a1adb0aca5eea3afad">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b3c7d6c0c7f3d6cbd2dec3dfd69dd0dcde">[email protected]</a></a>
        </p>
        <p>
          Download
          &nbsp;&nbsp;&nbsp;&nbsp;<a href="example-eng.pdf">eng</a>
          &nbsp;&nbsp;&nbsp;&nbsp;<a href="example-deu.pdf">deu</a>
        </p>
      </div>
   </span>
   <span>
      <div class="photo">
         <img src="http://webjunction.net/images/avatars/default-avatar.png" alt="dummy">
      </div>
   </span>
</div>

The accompanying CSS styles:

.content {
    margin-bottom:2%;
    text-align: center;
}
.content span {
    display: inline-block;
    vertical-align: middle;
}
.content #texxts {
    border: 1px solid red;
    /* to demonstrate centering */
}
body {
    font-family:'Lato', sans-serif;
    font-weight: 300;
    font-size: 150%;
    line-height: 1.6em;
}
.cv {
    display: table;
    margin: 0 auto;
}
.photo {
    float: right;
}

Answer 3

Answer №2

Your HTML code has been beautified for better readability.

<div class="content">
  <div class="cv">
    <p>Some text</p>
    <p>Some more text</p>
    <p>etc etc</p>
    <p><a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a7d3c2d4d3e7c2dfc6cad7cbc289c4c8ca">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3c48594f487c59445d514c5059125f5351">[email protected]</a></a></p>
    <p>Download
      <a href="example-eng.pdf" class="p-link">eng</a>
      <a href="example-deu.pdf" class="p-link">deu</a>
    </p>
  </div>
  <div class="photo">
    <img src="image/dummy.png" alt="dummy">
  </div>
</div>

This is the CSS code:

.content {
  background: #fefefe;
  width: 600px;
  margin: 20px auto 0; /* margins - top | left/right | bottom */
  padding: 10px;
  text-align: center;
  border: 1px dashed #bbb;
}
.cv {
  display: inline-block;
  margin: 0 20px;
}
.photo {
  position: relative;
  display: inline-block;
  width: 150px;
  height: 200px;
}
.photo:after {
  background: rgba(100,100,100,0.5);
  position: absolute;
  content: "Image description";
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  padding: 10px;
  color: #fff;
  opacity: 0;
  transition: all 0.4s linear;
  box-sizing: border-box;
}
.photo:hover.photo:after {
  height: 100%;
  opacity: 1;
}
.photo img {
  width: 100%;
  height: 100%;
}
p {
  text-align: left;
  line-height: 23px;
}
.p-link {
  margin-left: 10px;
}

To have block level elements like div displayed side by side (inline), you need to use the CSS property display: inline-block;. Alternatively, you can float them left or right while ensuring their combined width with margins, padding, and borders does not exceed the container's inner width. Otherwise, they will stack on top of each other. Here's a helpful FIDDLE for reference.

Answer 4

Your HTML code has been beautified for better readability.

<div class="content">
  <div class="cv">
    <p>Some text</p>
    <p>Some more text</p>
    <p>etc etc</p>
    <p><a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a7d3c2d4d3e7c2dfc6cad7cbc289c4c8ca">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3c48594f487c59445d514c5059125f5351">[email protected]</a></a></p>
    <p>Download
      <a href="example-eng.pdf" class="p-link">eng</a>
      <a href="example-deu.pdf" class="p-link">deu</a>
    </p>
  </div>
  <div class="photo">
    <img src="image/dummy.png" alt="dummy">
  </div>
</div>

This is the CSS code:

.content {
  background: #fefefe;
  width: 600px;
  margin: 20px auto 0; /* margins - top | left/right | bottom */
  padding: 10px;
  text-align: center;
  border: 1px dashed #bbb;
}
.cv {
  display: inline-block;
  margin: 0 20px;
}
.photo {
  position: relative;
  display: inline-block;
  width: 150px;
  height: 200px;
}
.photo:after {
  background: rgba(100,100,100,0.5);
  position: absolute;
  content: "Image description";
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  padding: 10px;
  color: #fff;
  opacity: 0;
  transition: all 0.4s linear;
  box-sizing: border-box;
}
.photo:hover.photo:after {
  height: 100%;
  opacity: 1;
}
.photo img {
  width: 100%;
  height: 100%;
}
p {
  text-align: left;
  line-height: 23px;
}
.p-link {
  margin-left: 10px;
}

To have block level elements like div displayed side by side (inline), you need to use the CSS property display: inline-block;. Alternatively, you can float them left or right while ensuring their combined width with margins, padding, and borders does not exceed the container's inner width. Otherwise, they will stack on top of each other. Here's a helpful FIDDLE for reference.

Answer 5

Answer №3

When you float the photo to the right, it only happens after the .cv element is displayed. This causes the float to act as if there is a line break behind the .cv element, moving it to a new line and floating it to the right on that line. The result is that the photo appears below the .cv element, but correctly aligned to the right.

To resolve this issue, you have two options: either float the .cv element to the left (which will disrupt your current horizontal center alignment) or rearrange the HTML so that the photo element comes before the .cv element. This way, the photo will float to the right on the first 'line' alongside the .cv element.

It's worth noting that using display: table on the .cv element serves no purpose unless you are also utilizing table-rows and table-cells within the .cv element in your actual code. Otherwise, it should be removed as it doesn't serve any function :)

Answer 6

When you float the photo to the right, it only happens after the .cv element is displayed. This causes the float to act as if there is a line break behind the .cv element, moving it to a new line and floating it to the right on that line. The result is that the photo appears below the .cv element, but correctly aligned to the right.

To resolve this issue, you have two options: either float the .cv element to the left (which will disrupt your current horizontal center alignment) or rearrange the HTML so that the photo element comes before the .cv element. This way, the photo will float to the right on the first 'line' alongside the .cv element.

It's worth noting that using display: table on the .cv element serves no purpose unless you are also utilizing table-rows and table-cells within the .cv element in your actual code. Otherwise, it should be removed as it doesn't serve any function :)

Answer 7

Answer №4

**Give this a shot** 

.personal-info {
   display: table;
   margin: 0 auto;
   float:left;
}
.profile-pic {
   float: left;
   margin-top:80px;
}

Answer 8

**Give this a shot** 

.personal-info {
   display: table;
   margin: 0 auto;
   float:left;
}
.profile-pic {
   float: left;
   margin-top:80px;
}

Align both text and images in the middle using HTML/CSS

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Is it possible for a kraken.js backend to manipulate the content of a webpage?

The sequence of HTML attributes

Is it considered acceptable to include a stylesheet inside the <body> element?

The Bootstrap div is struggling to maintain its width on smaller screens

Issue encountered while trying to exhibit jpg image content from server side on html

Mobile application showing alerts for connected devices

Differentiate input elements with custom styling

Incorporate an icon into an Angular Material input field

Div overlaps div on certain screen dimensions

Twitter Bootstrap 3.3.5 navigation menu with a drop-down feature aligned to the right

Modify the color of the text for the initial letter appearing in the sentence

Inquiring about how to make the pieces move on the checker boards I created

Tips for adjusting arrow alignment in your custom breadcrumbs using Bootstrap 5.2.0

What is the best way to assign a default value in mat-select when using an ngFor loop?

What could be the reason for the HTML canvas not displaying anything after a new element is added?

Techniques for preventing background layering using CSS

Using Jquery to add new HTML content and assign an ID to a variable

Is it possible to seamlessly incorporate a square image into a bootstrap background image slider without having to crop the image?

The performance of ASP.net text-boxes is inconsistent

Obtaining the Span value inside a DIV when the text in the DIV is selected - JavaScript