CSS not placing text in middle of DIV asp.net c#

Question

I've got the following page. http://jsfiddle.net/r1mymj25/. I'm having trouble trying to get the text in the QDetails to be placed in the middle of the DIV using CSS.

#QDetails{
   height:25px; 
   top:40px; 
   background-color:white; 
   text-align:center; 
   font-size:small; 
   border-color:black; 
   border-width:2px; 
   border-style:solid; 
   font-family: Arial, Helvetica, sans-serif; 
   vertical-align:middle;
}

I've managed to centre it but not place it in the middle. I've tried "vertical-align:middle;" but no joy. What am I doing wrong please?

possible duplicate of [vertical alignment of elements in a div](http://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div) — Alex K., Aug 14 '14 at 10:08

score 0 · Answer 1 · answered Aug 14 '14 at 10:08

0

vertical-align : middle only works within tables (as far as I know).

If you include the following in your style definition it should work: line-height:25px;

answered Aug 14 '14 at 10:08

Paddy

33,309
15
79
114

score 0 · Answer 2 · answered Aug 14 '14 at 10:10

0

Remove top:40px(not doing anything) and apply line-height property like below.

#QDetails{
height:25px; 
background-color:white; 
text-align:center; 
font-size:small; 
border:2px solid black;
font-family: Arial, Helvetica, sans-serif; 
line-height:25px;
}

DEMO

answered Aug 14 '14 at 10:10

Suresh Ponnukalai

13,820
5
34
54

Hi Suresh. Yes that works but as soon as you put the images back in the same happens. – codingitup Aug 14 '14 at 10:41

score 0 · Accepted Answer · answered Aug 14 '14 at 10:23

0

Try this.

Create a span inside the div and then set text to the span like below

<div id="QDetails">
    <span id="msg"></span>
</div>

This is the css class

#QDetails
{
   height:25px; 
   top:40px; 
   background-color:white;
   font-size:small; 
   border-color:black; 
   border-width:2px; 
   border-style:solid; 
   font-family: Arial, Helvetica, sans-serif; 
   display: table;
   text-align:center;
}

#msg
{
   display: table-cell;
   vertical-align: middle;
}

Try this. It will make it exact.

answered Aug 14 '14 at 10:23

Ganesh Gaxy

657
5
11

No joy i'm afraid Ganesh. Still produces the same. – codingitup Aug 14 '14 at 10:44
I'm sorry about not working on you, but check this fiddle same code its working perfectly... [jsfiddle](http://jsfiddle.net/ganeshgaxy/fyojL13t/) – Ganesh Gaxy Aug 14 '14 at 10:50
I've seen you fiddle now tell me exactly which element you want to center align it. – Ganesh Gaxy Aug 14 '14 at 10:52
its the div:
all the text in that ie: Lee Barker. It seems ok when it's just text but the text goes to the bottom when there are images as well within the div which are needed.
– codingitup Aug 14 '14 at 10:59
okay hold on. so you need to align the images with text too?? – Ganesh Gaxy Aug 14 '14 at 11:04
[jsfiddle to middle everything inside div](http://jsfiddle.net/ganeshgaxy/34qe3abs/) look at this, everything is in middle... hope this will help – Ganesh Gaxy Aug 14 '14 at 11:13
Nearly there thank you Ganesh. It's now in the middle but it's shrunk the Div QDetails down. – codingitup Aug 14 '14 at 11:33
you have to properly arrange the following divs, that will fix it. don't worry. – Ganesh Gaxy Aug 14 '14 at 11:54
If you find these this post useful accept as the answer. That will help us bro. – Ganesh Gaxy Aug 14 '14 at 11:55

CSS not placing text in middle of DIV asp.net c#

3 Answers3