发表新帖
发表新帖

CSS: Center block, but align contents to the left

后端 未结
关注
8 757
别那么骄傲
别那么骄傲 2020-11-30 19:27

I want a whole block to be centered in its parent, but I want the contents of the block to be left aligned.

Examples serve best

On this page :

http

相关标签:
8条回答
  • 囚心锁ツ
    2020-11-30 19:49 
    <div>
    <div style="text-align: left; width: 400px; border: 1px solid black; margin: 0 auto;">
         <pre>
Hello
Testing
Beep
         </pre>
    </div>
</div>
    0 讨论(0)
  • 傲寒
    2020-11-30 19:50

    Reposting the working answer from the other question: How to horizontally center a floating element of a variable width?

    Assuming the element which is floated and will be centered is a div with an id="content" ...

    <body>
<div id="wrap">
   <div id="content">
   This will be centered
   </div>
</div>
</body>

    And apply the following CSS

    #wrap {
    float: left;
    position: relative;
    left: 50%;
}

#content {
    float: left;
    position: relative;
    left: -50%;
}

    Here is a good reference regarding that http://dev.opera.com/articles/view/35-floats-and-clearing/#centeringfloats

    0 讨论(0)
  • 我寻月下人不归
    2020-11-30 19:50

    Is this what you are looking for? Flexbox...

    .container{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: center;
  align-items: center;
}
.inside{
  height:100px;
  width:100px;
  background:gray;
  border:1px solid;
}
    <section class="container">
  <section class="inside">
    A
  </section>
  <section class="inside">
    B
  </section>
  <section class="inside">
    C
  </section>
</section>

    0 讨论(0)
  • 清酒与你
    2020-11-30 19:51

    THIS works

    <div style="display:inline-block;margin:10px auto;">
    <ul style="list-style-type:none;">
        <li style="text-align:left;"><span class="red">❶</span> YouTube AutoComplete Keyword Scraper software <em>root keyword text box</em>.</li>
        <li style="text-align:left;"><span class="red">❷</span> YouTube.com website <em>video search text box</em>.</li>
        <li style="text-align:left;"><span class="red">❸</span> YouTube AutoComplete Keyword Scraper software <em>scraped keywords listbox</em>.</li>
        <li style="text-align:left;"><span class="red">❹</span> YouTube AutoComplete Keyword Scraper software <em>right click context menu</em>.</li>
    </ul>
</div>
    0 讨论(0)
  • 暖寄归人
    2020-11-30 19:55

    I've found the easiest way to centre and left-align text inside a container is the following:

    HTML:

    <div>
  <p>Some interesting text.</p>
</div>

    CSS:

    P {
  width: 50%; //or whatever looks best
  margin: auto; //top and bottom margin can be added for aesthetic effect
}

    Hope this is what you were looking for as it took me quite a bit of searching just to figure out this pretty basic solution.

    0 讨论(0)
  • 走了就别回头了
    2020-11-30 20:03

    Normally you should use margin: 0 auto on the div as mentioned in the other answers, but you'll have to specify a width for the div. If you don't want to specify a width you could either (this is depending on what you're trying to do) use margins, something like margin: 0 200px; , this should make your content seems as if it's centered, you could also see the answer of Leyu to my question

    0 讨论(0)
 看不清?
提交回复
热议问题