Center text vertically and horizontally without absolute positioning

Question

First of all, it's different from others questions because I can't use position: absolute; as I used usually because of my jQuery plugin (I don't use this plugin in the example, but I have to do position: relative; to the inside-table).

JSFIDDLE: https://jsfiddle.net/h8ywumbk/

HTML:

<div id="table">
  <div id="inside-table" >
    <span>Hello</span>
  </div>
</div>

CSS:

#table {
  width: 100%;
  height: 100px;
  border: solid 1px black;
  background-color: transparent;
}
#inside-table {
  position: relative;
  width: 98%;
  height: 80px;
  background-color: transparent;
  border: solid 1px black;
  margin: 0 auto;
  margin-top: 10px;
}
#inside-table span {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

I'm trying to center the text (not a single line) vertically and horizontally on the tables. Any suggestions?

http://stackoverflow.com/a/33049198/3597276 – Michael Benjamin Jan 27 '16 at 22:16 — Michael Benjamin, Jan 27 '16 at 22:16

score 2 · Accepted Answer · answered Jan 27 '16 at 22:12

2

Just use flexbox

#table {
  width: 100%;
  height: 100px;
  border: solid 1px black;
  background-color: transparent;
}
#inside-table {
  position: relative;
  width: 98%;
  height: 80px;
  background-color: transparent;
  border: solid 1px black;
  margin: 0 auto;
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#inside-table span {
  
}

<div id="table">
  <div id="inside-table">
    <span>Hello</span>
  </div>
</div>

answered Jan 27 '16 at 22:12

Narek-T

1,898
10
20

Hi, thanks. Im using WEBMATRIX and it shows me an errors message to display:flex and the next two lines... – Web R Jan 27 '16 at 22:16
Hm.. I don't know what is it, but it should be ashamed that it did not know about flexbox :) – Narek-T Jan 27 '16 at 22:17
it still shows the messages, but somehow it center the text on my website although it. Thanks sir – Web R Jan 27 '16 at 22:30

score 0 · Answer 2 · answered Jan 27 '16 at 22:14

Try this:

.table {
  display: table;
  width: 100%;
}
.td {
  display: table-cell;
  vertical-align: middle;
}

<div class="table">
  <div class="td">
    text
  </div>
  <div class="td">
    <img alt="" src="http://url style="width: 120px; height: 148px;" />
  </div>
</div>

score 0 · Answer 3 · answered Jan 27 '16 at 22:19

0

I got it centered like this:

#inside-table span {
  position: relative;
  top: 50%;
  left: 50%;
}

You can always mess with the percentages if you want it shifted one direction or another

answered Jan 27 '16 at 22:19

cfatt10

688
1
7
13

Center text vertically and horizontally without absolute positioning

3 Answers3