CODEWITHSUNDEEP
htmlcsscross-browservertical-alignment
Jazcash
Jazcash

Reputation: 3312

Having trouble vertically centering an element

https://jsfiddle.net/93hjyhs8/

I'm trying to vertically center the text on the right, but having great difficulty finding a pure CSS solution that works in all browsers.

The height of the .block element should be dynamic and expand to the size of the tallest child element (currently .thing1).

Note, that if possible I would prefer to avoid hacks such as using tables, but feel free to post those kind of solutions regardless.

Also, why is the element not only at the bottom but also slightly nudged down?

.block {
  width: 500px;
  background: yellow;
}
.thing1 {
  height: 100px;
  width: 40%;
  background: blue;
  display: inline-block;
}
.thing2 {
  background: red;
  width: 60%;
  vertical-align: top;
  display: inline-block;
}
<div class='block'>
  <span class='thing1'></span><span class='thing2'>Hello world how are you today r u alrite m8 i think u r weak m8</span>
</div>

Upvotes: 0

Views: 47

Answers (2)

Kariem Muhammed
Kariem Muhammed

Reputation: 479

You could use the new awesome css flexbox,

.block {
  width: 500px;
  background: yellow;

  display: flex;
  align-items: center;
  justify-content: center;
}

Demo: https://jsfiddle.net/3y41ot0b/

Upvotes: 0

Vitorino fernandes
Vitorino fernandes

Reputation: 15971

demo - https://jsfiddle.net/victor_007/93hjyhs8/1/

add vertical-align:middle for both the inline-block elements

Upvotes: 1

Related Questions