Change position of CSS content

Question

The below code changes the image/text on hover and works fine. However I need the text (located in content:) to be in the middle of the div, both vertically and horizontally.

It's already aligned horizontally with text-align: center; so I just need it aligned vertically. Any ideas?

.servicecircle { 
    width: 204px; 
    height: 204px;
    background-image: url('secret.png');
    display: inline-block;
    background-repeat: no-repeat;
    margin-left: 22px;
    margin-right: 22px;
    /* Button transition*/
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
}

.servicecircle:hover{
    cursor: pointer;
}

.servicecircle:after { 
    width: 204px; 
    height: 204px;
    display: inline-block;
    background-repeat: no-repeat;
    /* Button transition*/
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
    /* Content is inserted */
    content: 'Service 1';
}

.servicecircle:hover:after{
    background-image: url('secret.png');
    cursor: pointer;
    content: 'Service Description..';
}

I've tried vertical-align: middle but it didn't do anything.

Possible duplicate of [Vertically align text in a div](http://stackoverflow.com/questions/2939914/vertically-align-text-in-a-div) — Mir, Oct 19 '16 at 09:59

score 1 · Accepted Answer · answered Oct 19 '16 at 09:31

1

If you know your content will always stay on one line, you can safely use line-height (the same line-height your height is set at).

answered Oct 19 '16 at 09:31

veksen

5,814
5
17
33

Thanks that worked I've never used that before. Currently I use "top: px;" to determine my text position, is it better to use "line-height" instead? – Ben Oct 19 '16 at 09:38
@Ben Where are you using `top`? In short there are multiple ways to center stuff in CSS, it depends on your use and need, and it also depends a lot if you know the dimension of the parent and the centered item. – veksen Oct 19 '16 at 09:42
I meant in general sorry every time I position text vertically it's always with "top" or "margin-top" – Ben Oct 19 '16 at 09:44
It depends. If you're centering text and you know it will never be longer than one line, line-height is very safe to use. If you're centering content that you know the height (here 50px), a `height: 50px; top: 50%; margin-top: -25px` can be used (negative margin top to half of the height). In case you don't know the height, there are many ways to achieve it (too long for a comment), see https://css-tricks.com/centering-css-complete-guide/ and https://css-tricks.com/centering-in-the-unknown/ – veksen Oct 19 '16 at 09:48

score 1 · Answer 2 · answered Oct 19 '16 at 09:48

Here are two solutions, one using flexbox browser support (http://caniuse.com/#feat=flexbox) and the second uses tables, should be supported everywhere: https://jsfiddle.net/k95shxfL/4/

<div class="flexbox-vertical-middle">
  <div>
    Service Description
  </div>
</div>

<div class="table-vertical-middle">
  <div class="table-cell">
    Service Description
  </div>
</div>

.flexbox-vertical-middle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

.table-vertical-middle {
  display: table;
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

.table-cell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 100%;
  height: 100%;
}

Change position of CSS content

2 Answers2