marcos marcos - 16 days ago 5
CSS Question

Vertical center align text with icon (update)

I'm having a problem vertically aligning two icons with a text element. I'm unsure as to why the text div is creating an extra space above its container. How do I vertical align the two text lines with the two checkbox icons?


  • I just realized that the space above the p tag is being generated by the image. When I set the positioning of the image to absolute, the text and image align.



Here is a link to the website: http://fosterinnovationculture.com/email/index.html

Here is a screenshot of the misaligned icons:enter image description here

Here is the HTML:

<th style="text-align:center">
<div class="bullet-container">
<div class="bullet-one">
<div class="img-left" style="width:60px; margin:0; display:inline-block; text-align:right;">
<img src="images/icons/check_box.png" style="width:30px; display:inline-block; margin-right:0px">
</div>
<div class="content-right" style="display:inline-block">
<p>Remove all work, supplies, and trash</p>
</div>
</div>
</div>
</th>

Answer

I just checked in your website,

Add this class to your css then add the class to the p tag inside the table you want to vertically algin center

.text-align-vert {
    display: table-cell;
    padding: 4px;
}

Then inside your html

<th style="text-align:center">
     <div class="bullet-container">
          <div class="bullet-one">
               <div class="img-left" style="width:60px; margin:0; display:inline-block; text-align:right;">
                    <img src="images/icons/check_box.png" style="width:30px; display:inline-block; margin-right:0px">
               </div>
               <div class="content-right" style="display:inline-block">
                    <p class="text-align-vert">Remove all work, supplies, and trash</p>
               </div>
          </div>
    </div>
</th> 

enter image description here

Comments