CODEWITHSUNDEEP
javascripthtmlcss
LCJ
LCJ

Reputation: 22652

Text-Align Does not Work

I have the following HTML code. http://jsfiddle.net/Lijo/wJX9C/

I need to align the contents (“HAI” and button) as center aligned. How do we correct it?

Note: It need to work in IE7, Chrome

<html>
<div id="popup"  class="popup">
       <div id = "poupContentLine1" class="poupContentLine">
            HAI
       </div>
       <div id = "poupContentLine2" class="poupContentLine">
            <input type="submit" name="ctl00$detailContentPlaceholder$btnClose" value="CLOSE" id="detailContentPlaceholder_btnClose" />
       </div>
</div>
</html>

Style

.popup 
{
  width:530px;
  background-color:#ffffff;
  border:3px solid Orange;
  padding: 10px 5px 10px 5px;
  margin: 0px 0px 0px 0px;
}

poupContentLine
{
    width:530px; 
    height:auto;
    text-align:center;
    margin: 0px 0px 0px 0px;
}

Upvotes: 1

Views: 224

Answers (2)

Ian
Ian

Reputation: 6124

First, remove the popupcontentline styling; it's unnecessary. Then add text-align: center to .popup. Also, shorten it to margin: 0; (irrelevant to your problem, but all those "0"s aren't necessary and lengthen your code.)

Example: http://jsfiddle.net/wJX9C/10/

.popup
{
    width:530px;
    background-color:#ffffff;
    border:3px solid Orange;
    padding: 10px 5px 10px 5px;
    margin: 0;
    text-align:center;
}

Note: the HTML can also be simplified, but I didn't do anything with that.

Upvotes: 1

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

you missed a .

.poupContentLine

since it's a classname — example fiddle: http://jsfiddle.net/wJX9C/2/

Upvotes: 10

Related Questions