CODEWITHSUNDEEP
cssvertical-alignment
user8749260
user8749260

Reputation:

Can't vertically align this text inside a div

I want to have both images and text inside these divs to be vertically centered.

I got the img to work with top: 0; bottom: 0; margin: auto;. Then I tried to vertically align the text by setting the line-height and height to the same height as the container but it doesn't center well, it's off by some amount.

How can I get this to work?

<div class="border" style="border:1px solid red; width:100%; height:70px; position:relative;">
  <div class="border" style=" border:1px solid red; float:left; width:25%; height:100%; position:relative;"><!--contenedor facebook-->
    <img style="width:32px; height:32px; position:absolute; top:0; bottom:0; margin:auto;"  src="">
	<a href="tel:+34646611421"><span style=" position:absolute; left:33px; line-height:70px; height:70px; font-family:Oswald, sans-serif; font-size:24px;">646611421</span></a>
  </div>
  <div class="border" style=" border:1px solid red; float:left; width:25%; height:100%; position:relative;"><!--contenedor mail-->
     <img style="width:32px; height:32px; position:absolute; top:0; bottom:0; margin:auto;"  src="">
	<span><a href="#" style="line-height:70px; height:70px; position:absolute; left:33px;">Mail Us</a></span>
  </div>
</div>

Upvotes: 0

Views: 481

Answers (1)

pirs
pirs

Reputation: 2461

It's not so clear, but there are many ways to center content with display:flex; and justify-content:center; in the style of the parent div. Or you can play with display:inline-block; and vertical-align:middle; too

More informations on this website for flexbox and this Codepen for inline-block/vertical-align

div {
border:solid 1px #cc0000;
}

.flex-centered {

display:flex;
justify-content:center;
flex-direction: row;
flex: 2;
}

.flex-centered2 {

display:flex;
justify-content:center;
flex-direction: column;

}

.flex-centered3 {

display:flex;
justify-content:start;
flex-direction: row;

}
.vertical-middle {  }
.vertical-middle img, .vertical-middle a { display:inline-block; vertical-align:middle;  }
<div class="flex-centered">
   <div>Block 1</div>
   <div>Block 2</div>
</div>

<br />
<br />

<div class="flex-centered2">
   <div>Block 1</div>
   <div>Block 2</div>
</div>

<br />
<br />

<div class="flex-centered3">
   <div class="flex-centered2">
   Block 1
   </div>
   <div class="flex-centered">
    <div>Block 2</div>
    <div>Block 3</div>
   </div>
</div>

<br />
<br />

<div class="flex-centered3 vertical-middle">
  <div>
    <img style="width:32px; height:32px;"  src="">
	  <a href="tel:+34646611421"><span>646611421</span></a>
  </div>
  <div><!--contenedor mail-->
     <img style="width:32px; height:32px;"  src="">
	   <a><span>Mail Us</span></a>
  </div>
</div>

Upvotes: 1

Related Questions