CSS:Центральный блок, но содержимое выровнять по левому краю

StackOverflow https://stackoverflow.com/questions/1269589

  •  13-09-2019
  •  | 
  •  

Вопрос

Я хочу, чтобы весь блок был центрирован по его родительскому элементу, но я хочу, чтобы содержимое блока было выровнено по левому краю.

Примеры служат лучше всего

На этой странице :

http://yaml-online-parser.appspot.com/?yaml=%23+ASCII+Art%0d%0a---+%7c%0d%0a++%5c%2f%2f%7c%7c%5c% 2f%7c%7c%0d%0a++%2f%2f+%7c%7c++%7c%7c__%0d%0a&type=python

ascii-изображение должно быть центрировано (как оно выглядит), но оно должно выровняться и выглядеть как «YAML».

Или это :

http://yaml-online-parser.appspot.com/?yaml=%3f+-+Detroit+Tigers%0d%0a++-+Chicago+cubs%0d%0a%3a%0d%0a++-+23 июля 2001 г. %0d%0a%0d%0a%3f+%5b+Нью+Йорк+Янкиз%2c%0d%0a++++Атланта+Брэйвз+%5d%0d%0a%3a+%5b+2001-07-02%2c+ 2001-08-12%2c%0d%0a++++2001-08-14+%5d%0d%0a

все сообщения об ошибках должны выстраиваться в линию, как в консоли.

Это было полезно?

Решение 2

Перепечатка рабочего ответа на другой вопрос: Как центрировать плавающий элемент переменной ширины по горизонтали?

Предполагая, что элемент, который плавает и будет центрирован, является элементом div с id="content"...

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

И примените следующий CSS

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

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

Вот хорошая ссылка на этот счет http://dev.opera.com/articles/view/35-floats-and-clearing/#centeringfloats

Другие советы

Сначала создайте родителя div который центрирует свой дочерний контент с text-align: center.Далее создаем дочернего div который использует display: inline-block адаптироваться к ширине своих детей и text-align: left чтобы содержимое, которое оно содержит, выровнялось по левому краю по желанию.

<div style="text-align: center;">
    <div style="display: inline-block; text-align: left;">
        Centered<br />
        Content<br />
        That<br />
        Is<br />
        Left<br />
        Aligned
    </div>
</div>

Если я вас хорошо понимаю, вам нужно использовать для центрирования контейнера (или блока)

margin-left: auto;
margin-right: auto;

и выровнять его содержимое по левому краю:

text-align: left;

Обычно вы должны использовать маржу:0 auto для div, как упоминалось в других ответах, но вам нужно будет указать ширину div.Если вы не хотите указывать ширину, вы можете (это зависит от того, что вы пытаетесь сделать) использовать поля, что-то вроде поля:0 200 пикселей;, это должно привести к тому, что ваш контент будет выглядеть центрированным. Вы также можете увидеть ответ Лею на мой вопрос

<div>
    <div style="text-align: left; width: 400px; border: 1px solid black; margin: 0 auto;">
         <pre>
Hello
Testing
Beep
         </pre>
    </div>
</div>

Это то, что вы ищите?Флексбокс...

.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>

Я обнаружил, что самый простой способ центрировать и выравнивать текст по левому краю внутри контейнера заключается в следующем:

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
}

Надеюсь, это то, что вы искали, поскольку мне потребовалось немало времени, чтобы найти это довольно простое решение.

Это работает

<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>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top