how do I add equal gap on each side of the text with css?


Tags: html,css,text,center

Problem :

I want to change from this http://i.imgur.com/XesXy.png to this http://prntscr.com/o9hfh How do I add the extra gap on both side and squeeze the text together more? basically I want to center the text without useing text-align:center because I like text-align:left better, but if I do left the text will not be in the center anymore.

HTML

<body> <!-- start of the body-->
            <ul class="sidemenu">
                <li><a href="">About Us</a></li>
                <li><a href="">Contact Us</a></li>
                <li><a href="">FAQ</a></li>
                <li><a href="">How To Order</a></li>
                <li><a href="">Term And Agreement</a></li>
                <li><a href="">Shipping Information</a></li>
            </ul>
            <div id="about-us">

            <p><h2>About Us</h2>Lorem ipsum .<br />

Morbi in libero quis quam consequat malesuada..</p>
            </div>

            </body>

css:

#about-us {
margin: 10px auto;
background-color:#FFF;
height:800px;
width:710px;
left:125px;
position: relative;
padding:0em 0em;

}

#about-us p {
text-align:left;
padding-top: 20px;

}

body {
position:relative;
}

.sidemenu{
position:absolute;
background-color: #fff;
width:240px;
height:780px;
margin-top: 10px;
list-style:none;
text-align:left;
padding-top: 20px;


}

.sidemenu li a{
color:#222222;
padding: 0em 1em;
line-height: 2em;

}



Solution :

Just add padding to the #about_us box while slice its width and height accordingly:

#about_us {
           padding:20px 40px;
          }

and configure line-height for the p label:

#about_us p {
       line-height:40px;
      }

    CSS Howto..

    php- How to strip CSS in the text

    How to disable google translator plug in and set margin-top: to 0px for body element?

    How to align images side by side without spacing when grouped within another element

    How to fix button position next to input when screen resizes

    How to create a line break instead of having text going on top of itself?

    How to hide specific TD borders in a TABLE using CSS

    How to highlight the menu item in menu

    how to align this div to appear on right most side of webpage?

    Thai line breaking: how to break Thai text effectively

    How to keep curved borders using css 3

    How to link to an image from a CSS file when using the resource plugin 1.2.14

    How to use HTML classes and ID's

    selectCheckboxMenu: items are shown with bold font

    How to edit CSS so button appears on same line as input field?

    HTML CSS How to stop a table to put the content after it on a new line?

    How to use the float:left property in CSS without having the trouble I have?

    How to add HTML/CSS using the editor on DNN? How to add markup without relying on modules?

    How to start css and html

    How to inscribe the following shape with CSS inside div?

    HTML/CSS how to temporarily highlight a section of a page [duplicate]

    overlay showing in background instead of on top

    Android Layout, how to make a radius and border like css

    how to change html content text

    using css

    How to toggle fade a DIV when hovered over an image

    How to apply Css class to a row using datatables.js?

    How to manually override CSS @media queries?

    How to remove hover state

    Popup not showing once per session as wanted (as mentioned by client)

    How to achieve no outside margins for floats in a div

    How can I align an image with css