Geek Answers Handbook

How to vertically and horizontally center all these elements?

I want to create a header area that has the previous and next left and right arrow buttons, with some title text in the center of the title area. The trick is that I also want all three elements in the title bar to also be vertically centered, regardless of whether the text title bar is so long that it makes it have a higher height than the arrow links. >

Here is a rough sketch of what I'm trying to achieve:

enter image description here

In the upper version, the arrows (black boxes) are higher than the title text, but in the lower version, the text is higher than the arrows. In all cases, I want everything to be vertically centered and the title text horizontally centered (which is not shown in my image).

HTML/CSS, , , - , , .

HTML:

<div class="container">
  <a href="#" class="prev"></a>
  <h1>Header text</h1>
  <a href="#" class="next"></a>
</div>

CSS

.container {
  display: table;
}

.prev, .next {
  background: #000;
  display: table-cell;
  height: 50px;
  vertical-align: middle;
  width: 20px;
}

.prev {
  float: left;
}

.next {
  float: right;
}

h1 {
  display: table-cell;
  margin: 20px;
  text-align: center;
  vertical-align: middle;
}

- , HTML/CSS, , ? .

+4
1

position:relative ?

.container{position:relative;}
.prev, .next {
    background: #000;
    height: 50px;
    width: 20px;
    position:absolute;
    top:50%;
    margin-top:-25px;
}
.prev {left:0;}
.next {right:0;}
h1 {
    text-align: center;
    padding:0;
    margin:0;
    margin:0 20px;
}

http://jsfiddle.net/gaby/M4crZ/1/

...

.container{position:relative;display:table;border:1px solid #ccc;}
.prev, .next {
    background: #000;
    height: 50px;
    width: 20px;
    position:absolute;
    top:50%;
    margin-top:-25px;
}
.prev {left:0;}
.next {right:0;}
h1 {
    text-align: center;
    padding:0 20px;
    margin:0;
    display:table-cell;
    vertical-align:middle;
}

http://jsfiddle.net/gaby/M4crZ/3/

+2

More articles:


All Articles