HTML - text at a center of a box

Question

I am trying to set text at a center of a box when a number is not present, and when number is present text should go to top and number at the bottom.

I am able to show with number box correctly but without number box is vertical alignment does not work.

I am an HTML new bee.

Can someone help me here? I have looked at various articles and they point to using table cell and vertical alignment as middle. I tried that as well, I think the red box does not have text in the middle.

Here is an example.

http://jsfiddle.net/seohh5r1/2/

<!DOCTYPE html>
<html>
<head>
<style> 

.alignleft {
    float: left;    
}
.alignright {
    float: right;    
}
.even-boxes,
.odd-boxes {
    height : 52px;
    width : 430px;
    padding-left : 20px;
    display : table-cell;
    vertical-align : middle;
}

.odd-boxes {
    background-color:#FFCCCC;
}

.even-boxes {
    background-color:#CCEBFF;
}

.surname-entry {
    font-size: 25px;
    font-family:"Verdana";
}

.name-entry {
    font-size: 18px;
    font-family:"Verdana";
}

.another-entry {
    font-size: 14px;
    font-family:"Verdana";
}

.number-entry {
    font-size: 32px;
    font-family:"Verdana";
}

</style>
</head>
<body>

<div class="odd-boxes">

    <div>
    <span class="surname-entry">ABCDEFGH<span>,</span></span>
    <span class="name-entry">&nbsp;PQRSTU</span>
    <span class="number-entry alignright" style="margin-right:20px">K</span>    
    </div>
</div>
<div class="even-boxes">

    <div>
    <span class="surname-entry">ABCDEFGH<span>,</span></span>
    <span class="name-entry">&nbsp;PQRSTU</span>
    <span class="number-entry alignright" style="margin-right:20px">K</span>
    <div class="another-entry">[1234567890101]</div>
    </div>
</div>
</body>
</html>

See this link may be helpful .... http://stackoverflow.com/questions/8865458/how-to-align-text-vertically-center-in-div-with-css — Mansukh Ahir, Jun 17 '15 at 03:39

score 0 · Answer 1 · answered Jun 17 '15 at 03:44

And here is another way to align text vertically, this solution will work for a single line and multiple lines of text, but still requires a fixed height container:

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>

The CSS just sizes the <div>, then vertically center aligns the <span> by setting the <div>'s line-height equal to its height, and making the <span> an inline-block with vertical-align: center. Then it sets the line-height back to normal for the <span> so its contents will flow naturally inside the block.

div {
  width: 250px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;      
}

Demo Link http://jsfiddle.net/CtH9k/

I looked at that link as well, but if I put all the blocks in one line, number comes to one line as well, I don't want that. I want number as shown in JSFiddle. — Rocky, Jun 17 '15 at 03:47

Vincent1989 · Answer 2 · 2015-06-17T04:25:05.477

-2

I misunderstood you earlier, try this again. If you are trying to vertically align elements

The span element must be moved out of the parent div hierarchy

<div>
    <span class="surname-entry">ABCDEFGH<span>,</span></span>
    <span class="name-entry">&nbsp;PQRSTU</span>
    <div class="another-entry">[1234567890101]</div>
</div>

<span class="number-entry">K</span>

You need to add in additional css, the crucial one is display:inline-block to vertically align your inner elements

.odd-boxes, .even-boxes{
  position:relative;
}

.odd-boxes>span, .even-boxes>span{
  position:absolute;
  right:20px;
  top:0;
  bottom:0;
  margin:auto;
  vertical-align:middle;
  height:39px;/*height need to be specified*/
}

Also I've modified some of your css, you can refer to my version below:

http://codepen.io/vincentccw/pen/vOJVbX

edited Jun 17 '15 at 04:25

answered Jun 17 '15 at 03:40

Vincent1989

1,525
14
22

It will center the text in the box, I don't want that. I want text to be left aligned, except the 'K' – – Rocky Jun 17 '15 at 03:45
It looks good. Thanks Vincent. Unfortunately, I don't have the luxury of keeping dynamic height of boxes as there has to be fixed number of boxes in a column. I am going to create a stack of those boxes. :-( – Rocky Jun 17 '15 at 05:30
1

@user3564816 you can just add height to the boxes, it should fix its height. – Vincent1989 Jun 17 '15 at 06:14
@user3564816 if it fixes your issue could you mark this answer as correct or vote up so it helps the others as well, thanks – Vincent1989 Jun 18 '15 at 08:17

HTML - text at a center of a box

2 Answers2