CODEWITHSUNDEEP
htmlcsszurb-foundation
marcos
marcos

Reputation: 121

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?

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>

Upvotes: 2

Views: 1411

Answers (2)

Nitheesh
Nitheesh

Reputation: 19986

Try updating your classes with these styles. I think this will fix the styles for you.

.bullet-one {
    display: table;
    margin: 0 auto;
}

.img-left {
    width: 60px;
    margin: 0;
    display: table-cell;
    text-align: right;
}

.content-right {
    display: table-cell;
    vertical-align: middle;
}

.content-right p {
    margin: 0;
}

I have attached the updated style screenshot.

enter image description here

Upvotes: 0

wuno
wuno

Reputation: 9875

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

Upvotes: 2

Related Questions