0

I have a parent container(like a pop-up), in which I have a child element appended to parent container. The child element is a div which has some text. I want to center the text inside the div, so that the text remains center aligned in the child div, but the text should align itself vertically as it grows beyond 3-4 lines. I am able to align text vertically as it grows, but when it still is a small text it should be center vertically, which is not happening. I have tried lot of css properties in the child class. Any help will be good.

.parentclass {
  position: absolute;
  top: 110px;
 left: 165px;
 width: 470px;
 height: 260px;
 text-align: center;
 background-image: url(../images/Notification_BG.png); }

.childclass {
 position: relative;
 position: inherit;
 width: 430px;
 height: 192px;
 left: 50%;
 top: 50%;
 margin-left: -215px;
 margin-top: -96px; /* Negative half of height. */
 text-align: center;
 text-overflow: -o-ellipsis-lastline;
 border: 1px solid blue;
 font-family: Arial;
 font-size: 28px;
 color: white; }

Thanks KK

KK123
  • 197
  • 1
  • 1
  • 9

2 Answers2

0

have u used vertical-align:middle; ?

try this :

.childclass {
  display: table-cell; 
  vertical-align: middle; 
  text-align: center; 
}

This link will definitely help you:

vertically-center-text-in-a-100-height-div

Community
  • 1
  • 1
Surinder ツ
  • 1,696
  • 3
  • 16
  • 26
  • I have definitely used these css properties, but does not seem to work.I need to use my solution on opera browser. – KK123 Dec 28 '12 at 05:55
  • Any other suggestions. Table property may not work in this case. – KK123 Dec 28 '12 at 06:00
  • i have used it in many cases it worked for me. have u removed position relative , top , left so on , try removing them and use dislay:table-cell; tell me if it works . – Surinder ツ Dec 28 '12 at 06:02
  • Yes Table-cell is working but I want the text to come in 2 lines, right now text is starting very near to the border, I want it to start with some spacing from left border.How should this happen? – KK123 Dec 28 '12 at 10:34
  • give padding to .childclass{padding-left: 20px;} – Surinder ツ Dec 28 '12 at 10:37
  • @Surinder...Thanks That works. Now I am trying to achieve ...if text expands beyond bounds of graphical area i.e.Parentclass height (by enforcing with CSS max-height property), text should truncate using CSS property text-overflow: -o-ellipsis-lastline;...I am finding issues in this too...Any idea:) – KK123 Dec 28 '12 at 10:55
  • I am just trying to have the text truncated in the last line of the table-cell and to show ellipsis. I thought that I can give max-height to achieve that.May be I can post separate question for that. – KK123 Dec 28 '12 at 11:53
0

Use your parentclass display as table and the childclass display as a table-cell and vertical-align:middle will work surely

html

<div class='parentclass'>
<div class='childclass'>Text which is more than two or three lines</div>
</div>

Css

.parentclass {
 height: 260px;
 text-align: center;
 display:table;
}
.childclass {
 vertical-align: middle;
 width: 430px;
 top: 50%;
 text-align: center;
 text-overflow: -o-ellipsis-lastline;
 border: 1px solid blue;
 font-family: Arial;
 font-size: 28px;
 color: black; 
}

See this fiddle for demo

Dineshkani
  • 2,586
  • 6
  • 27
  • 43
  • Yes your childclass with Table-cell is working but I want the text to come in 2 lines, right now text is starting very near to the border, I want it to start with some spacing from left border. – KK123 Dec 28 '12 at 10:35
  • Use text-indent: 20px; property in css of childclass to get what you want – Dineshkani Dec 28 '12 at 11:00
  • @Dinesh...Thanks That works...Now I am trying to achieve ...if text expands beyond bounds of graphical area i.e.Parentclass height by using CSS max-height property, text should truncate using CSS property text-overflow: -o-ellipsis-lastline;...I am finding issues in this too...Any idea:) – KK123 Dec 28 '12 at 11:09