0

I have problem to center textbox area using html5 Here is my code

`<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>

<div class="smart_pdbox" style="
width: 366px;
    border: 1px solid #fff;
    height: 320px;
    float: left;
    margin: 5px 29.75px 5px 29.75px;
    padding: 12px 5px 0 5px;
text-align:center;">
    <div class="smart_pdtitle"
    style="
        font-size:14px;
    color: #fff;
    border: solid 3px #FFDB6E;
    font-weight: bold;
    padding-top: 2px;
    padding-bottom: 2px;
    overflow: hidden;
    height: 34px;
    background:#FFDB6E;
    width: 144px;"
    ><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></div>
</div>

</body>
</html>      

I'm not using or align="center" because thats not support for html5. If I remove css max-width 144px, the title is centered but I can't set the width. If I use the max-width 144px, the textbox (smart_pdtitle) is float to left not centered. How to set width for the textbox (smart_pdtitle) to be center of the box area (smart_pdbox) ?

1 Answers1

1

Try adding margin:auto; to your smart_pdtitle div's inline style attribute.

noctufaber
  • 764
  • 2
  • 10
  • 24