html - Trouble horizontally centering <div> contaning <ul> -
i can't seem list center. li elements center fine seems can't ul center on page.
i need ul or ul's container width: 100%; want have background ul should stretch fill page width , ul+margin height.
i have looked around webb no answers seem fit needs, first question , i'm new scene please understanding if i've done wrong.
html (with php used in wordpress)
<div class="body-news"> <ul id="newsbar"> <li> <?php dynamic_sidebar( 'in-body-widget-area' ); ?> </li> <li> <?php dynamic_sidebar( 'in-body-widget-area2' ); ?> </li> <li> <?php dynamic_sidebar( 'in-body-widget-area3' ); ?> </li> </ul> </div>
css
.body-news{ } .body-news ul{ margin: 0 auto; overflow: hidden; text-align: center; } #newsbar li{ text-align: left; float: left; display:inline; width: 300px; margin: 15px 20px; }
one simple solution remove text-align: left
li
elements , utilize display: table
ul
:
class="snippet-code-css lang-css prettyprint-override">.body-news { } .body-news ul { margin: 0 auto; overflow: hidden; text-align: center; display: table; } #newsbar li { float: left; display:inline; width: 300px; margin: 15px 20px; }
class="snippet-code-html lang-html prettyprint-override"><div class="body-news"> <ul id="newsbar"> <li> <p>widget1</p> </li> <li> <p>widget2</p> </li> <li> <p>widget3</p> </li> </ul> </div>
html css wordpress list
No comments:
Post a Comment