CSS - Vertical centering object and text creates unexpected result

Question

Vertical centering in CSS is relatively straight forward. This is the code I'm using.

position:relative;
top:50%;
transform:translateY(-50%);

1) This works great for centering multiple shapes next to each other.

2) It works great for centering multiple words next to each other.

However oddly enough when I place a centered shape next to a centered word it goes haywire. Is there an obvious, or not so obvious reason for this? How do I fix it?

I created a fiddle so you can see the result. https://jsfiddle.net/9h1pfpns/

Here is my code:

.container {
  height: 200px;
  margin: 10px;
  border: 4px solid #754419;
}
.shape {
  display: inline-block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: 250px;
  height: 100px;
  margin-left: 10px;
  background-color: aquamarine;
}
.text {
  display: inline-block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  font: bold 1.25em Arial, Helvetica, sans-serif;
  margin-left: 10px;
  border: 1px solid #754419;
}

<div class="container">
  <div class="shape"></div>
  <div class="text">first</div>
</div>

Tony Hensler · Answer 1 · 2017-01-13T23:58:50.293

3

You can change the CSS for text to:-

.text {
  display: inline-block;
  position: relative;
  margin: 0 auto;
  font: bold 1.25em Arial, Helvetica, sans-serif;
  margin-left: 10px;
  border: 1px solid #754419;
}

Just to clarify I removed the following CSS:-

top: 50%;
transform: translateY(-50%);

And added:-

margin: 0 auto;

Check out the jsFiddle https://jsfiddle.net/01kkavf4/

* Update *

You can also replace:-

top: 50%;
transform: translateY(-50%);

With:-

top: 10%;
transform: translateY(-50%);

jsFiddle of both:-

https://jsfiddle.net/01kkavf4/

The second resolutions fits better with your box.

Just a few different ways.

edited Jan 13 '17 at 23:58

answered Jan 13 '17 at 23:43

Tony Hensler

1,482
5
15
30

Tony your solution works perfect! Is there an obvious reason why my code goes haywire? If shapes can be centered and words can be centered using my original code why not shapes next to words? – DR01D Jan 13 '17 at 23:51
I'm going to be honest, I do not know why it doesn't work, I am also about to add another way which you may prefer. – Tony Hensler Jan 13 '17 at 23:55
Interestingly enough when I tried your solution with either only words or only shapes it doesn't work. But words + shapes and it works perfect. – DR01D Jan 14 '17 at 00:00
You can also just remove top: 50%; transform: translateY(-50%); from the text CSS class. jsFIddle of all 3 cases:- https://jsfiddle.net/2f7d26hr/ – Tony Hensler Jan 14 '17 at 00:06

score 2 · Accepted Answer · edited May 23 '17 at 12:01

It doesn't work because, before offsetting with relative positioning and transforms, the elements are not aligned to the top. The default is vertical-align: baseline.

Just add vertical-align: top.

.container {
  height: 200px;
  margin: 10px;
  border: 4px solid #754419;
}
.item, .text {
  display: inline-block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 10px;
  vertical-align: top;
}
.item {
  width: 250px;
  height: 100px;
  background-color: aquamarine;
}
.text {
  font: bold 1.25em Arial, Helvetica, sans-serif;
  border: 1px solid #754419;
}

<div class="container">
  <div class="item"></div>
  <div class="text">first</div>
</div>

Anyways, I recommend against this approach because in case the container is shorter than the contents, they will overflow above and below. But you won't be able to scroll to see the above overflow.

Instead, I recommend flexbox with auto margins.

.container {
  height: 200px;
  margin: 10px;
  border: 4px solid #754419;
  display: flex;
}
.item, .text {
  margin: auto 0 auto 10px;
}
.item {
  width: 250px;
  height: 100px;
  background-color: aquamarine;
}
.text {
  font: bold 1.25em Arial, Helvetica, sans-serif;
  border: 1px solid #754419;
}

<div class="container">
  <div class="item"></div>
  <div class="text">first</div>
</div>

For a business website in the USA can I (more or less) safely use `flexbox` today or should I wait a year or two more? — DR01D, Jan 14 '17 at 00:28
@DR01D See [caniuse](http://caniuse.com/#search=flexbox). Using prefixes, there is a 97.38% of at least partial support. — Oriol, Jan 14 '17 at 00:34

CSS - Vertical centering object and text creates unexpected result

2 Answers2