CSS: Center block, but align contents to the left
First, create a parent div that centers its child content with text-align: center . Next, create a child div that uses display: inline-block to adapt to the width of its children and text-align: left to make the content it holds align to the left as desired.
Centered
Content
That
Is
Left
Aligned If you wish to ensure that a long line does not widen everything too much, you may also apply the max-width property (with a value of your choice) to the inner tag:
doesn’t work since as soon as a single line of text doesn’t fit on one line it wraps the text and results in the block being full width but the text being less than full width, so even though the block is centered it doesn’t matter since the text is NOT the full width of the containing block. For an example refer to diagram 2a of stackoverflow.com/questions/8702802/…
@user3338098 It does work, in your case you need to set a max width for your text to stop the block from expanding to an undesired size. I literally just applied this exact same logic to my work and was able to achieve diagram 1b + 2b.
Assuming the element which is floated and will be centered is a div with an .
And apply the following CSS
doesn’t work since as soon as This will be centered doesn’t fit on one line it wraps the text and results in the block being full width but the text being less than full width, so even though the block is centered it doesn’t matter since the text is NOT the full width of the containing block. For an example refer to diagram 2a of stackoverflow.com/questions/8702802/….
If I understand you well, you need to use to center a container (or block)
margin-left: auto; margin-right: auto; and to left align it’s contents:
so, what do I put on my
and ? I've tried variations on that and failed.
i’m trying a container div, and the only way to make it work is with fixed width (which I don’t want).
I’ve found the easiest way to centre and left-align text inside a container is the following:
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.
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
sadly your solution creates an overflow with a forced horizontal scrollbar. Adding overflow: hidden to the parent element isn’t good since my output might be long enough to warrant a scroll bar. Sorry 🙁
Actually it’s not my solution as I referred, but anyway, I don’t get what you mean by overflow: hidden forcing scrollbars, it should hide contents not force scrollbars.
The solution in your post causes a horizontal scrollbar since the content is actually shifted 50% to the right. This requires a overflow:hidden to remove which doesn’t work for me.
The problem is that a block-level element will expand to fill the greatest width possible unless you put a limit on it.
I agree with Dav. Perhaps, you might take a look at tinyMCE or another rich text-editor that allows more customization than the standard HTML textarea. Unfortunately, you might end up spending a lot of time with a hackish result. Good luck though!
Is this what you are looking for? Flexbox.
For those of us still working with older browsers, here’s some extended backwards compatibility:
Line 1: Testing
Line 2: More testing
Line 3: Even more testing use CSS text-align and display properties to see changes accordingly. Margins are also helpful. For me in the case of SweetAlert to center and align left the following code works. For you may be a different scenario.
showPasswordHints()< var message = 'Your password mist contain:
'+ '1. At least 8 characters in length
'+ '2. At least 3 Lowercase letters
'+ '3. At least 1 Uppercase letter
'+ '4. At least 1 Numbers
'+ '5. At least 1 Special characters
'+ '5. Maximum 16 characters in length'; Swal.fire(< html:'' + message + '
', customClass: < popup: 'format-pre' >, showClass: < popup: 'animate__animated animate__fadeInDown' >, hideClass: < popup: 'animate__animated animate__fadeOutUp' >, icon: 'info', confirmButtonText: 'Got it', confirmButtonColor: '#3f51b5', >); >
Атрибут align
center Выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок. Строки текста словно нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный способ выравнивания активно используется в заголовках и различных подписях, вроде подрисуночных, он придает официальный и солидный вид оформлению текста. Во всех других случаях выравнивание по центру применяется редко по той причине, что читать большой объем такого текста неудобно. left Выравнивание текста по левому краю. В этом случае строки текста выравнивается по левому краю, а правый край располагается «лесенкой». Такой способ выравнивания является наиболее популярным на сайтах, поскольку позволяет пользователю легко отыскивать взглядом новую строку и комфортно читать большой текст. right Выравнивание текста по правому краю. Этот способ выравнивания выступает в роли антагониста предыдущему типу. А именно, строки текста равняются по правому краю, а левый остается «рваным». Из-за того, что левый край не выровнен, а именно с него начинается чтение новых строк, такой текст читать труднее, чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому краю применяется обычно для коротких заголовков объемом не более трех строк. Мы не рассматриваем специфичные сайты, где текст приходится читать справа налево, там возможно подобный способ выравнивания и пригодится. Но где вы у нас в стране видели такие сайты. justify Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю. Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами.
Значение по умолчанию
Аналог CSS
#layer1 < background: #fc0; padding: 5px; >#layer2
Результат данного примера показан на рис. 1.
Рис. 1. Выравнивание элементов с помощью атрибута align
justify-content¶
Свойство justify-content определяет, как браузер распределяет пространство вокруг флекс-элементов вдоль главной оси контейнера.
Демо¶
Это делается после того, как применяются размеры и автоматические отступы, за исключением ситуации, когда по крайней мере у одного элемента flex-grow больше нуля. При этом не остаётся никакого свободного пространства для манипулирования.
Синтаксис¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
/* Позиционное выравнивание */ justify-content: center; /* Выравнивание элементов по центру */ justify-content: start; /* Выравнивание элементов в начале */ justify-content: end; /* Выравнивание элементов в конце */ justify-content: flex-start; /* Выравнивание элементов с самого начала */ justify-content: flex-end; /* Выравнивание элементов с самого конца */ justify-content: left; /* Выравнивание элементов по левому краю */ justify-content: right; /* Выравнивание элементов по правому краю */ /* Выравнивание относительно осевой линии */ justify-content: baseline; justify-content: first baseline; justify-content: last baseline; /* Распределенное выравнивание */ /* Равномерно распределяет все элементы по ширине flex-блока. Первый элемент вначале, последний в конце */ justify-content: space-between; /* Равномерно распределяет все элементы по ширине flex-блока. Все элементы имеют полуразмерное пространство с обоих концов */ justify-content: space-around; /* Равномерно распределяет все элементы по ширине flex-блока. Все элементы имеют равное пространство вокруг */ justify-content: space-evenly; /* Равномерно распределяет все элементы по ширине flex-блока. Все элементы имеют "авто-размер", чтобы соответствовать контейнеру */ justify-content: stretch; /* Выравнивание при переполнении */ justify-content: safe center; justify-content: unsafe center; /* Глобальные значения */ justify-content: inherit; justify-content: initial; justify-content: unset;
Значения¶
Значение по-умолчанию: normal
Применяется к flex-контейнерам
start Элементы располагаются друг за другом и прижимаются к началу контейнера по главной оси. end Элементы располагаются друг за другом и прижимаются к концу контейнера по главной оси. flex-start Флексы прижаты к началу строки. flex-end Флексы прижаты к концу строки. center Флексы прижимаются по центру строки. left Элементы упакованы вплотную друг к другу к левому краю контейнера выравнивания. Если ось свойства не параллельна встроенной оси, это значение ведет себя как start . right Элементы упакованы вплотную друг с другом по направлению к правому краю контейнера выравнивания по соответствующей оси. Если ось свойства не параллельна встроенной оси, это значение ведет себя как start .
baseline , first baseline , last baseline Определяет участие в выравнивании первой или последней базовой линии: выравнивает базовую линию выравнивания первого или последнего базового набора блока с соответствующей базовой линией в общем первом или последнем базовом наборе всех блоков в его группе совместного использования базовой линии. Обратно-совместимое выравнивание для first baseline — start , а для last baseline — end .
space-between Флексы равномерно распределяются по всей строке. Первый и последний флекс прижимаются к соответствующим краям контейнера. space-around Флексы равномерно распределяются по всей строке. Пустое пространство перед первым и после последнего элементов равно половине пространства между двумя соседними элементами.
space-evenly Элементы равномерно распределены внутри контейнера выравнивания вдоль главной оси. Интервал между каждой парой смежных элементов, краем основного начала и первым элементом, краем основного конца и последним элементом абсолютно одинаков.
stretch Если объединенный размер элементов меньше, чем размер контейнера выравнивания, размер любого элемента авторазмера увеличивается одинаково (не пропорционально), при этом соблюдая ограничения, накладываемые max-height / max-width (или эквивалентными функциями), так что объединенный размер точно заполняет контейнер выравнивания вдоль главной оси.
safe Если размер элемента выходит за пределы контейнера выравнивания, элемент выравнивается, как если бы режим выравнивания был start .
unsafe Независимо от относительных размеров элемента и контейнера выравнивания, данное значение выравнивания учитывается.
Примечание¶
Спецификации¶
Поддержка браузерами¶
Can I Use flexbox? Data on support for the flexbox feature across the major browsers from caniuse.com.
Описание и примеры¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67
html> head> meta charset="utf-8" /> title>justify-contenttitle> style> section display: flex; margin-bottom: 10px; > section > div border: 1px solid #ccc; width: 100px; height: 100px; background: repeating-radial-gradient( circle at 50% 50%, #fff, #fff 25px, #f96 25px, #f96 50px ); > .flex-start justify-content: flex-start; > .flex-end justify-content: flex-end; > .center justify-content: center; > .space-between justify-content: space-between; > .space-around justify-content: space-around; > style> head> body> section class="flex-start"> div>div> div>div> div>div> section> section class="flex-end"> div>div> div>div> div>div> section> section class="center"> div>div> div>div> div>div> section> section class="space-between"> div>div> div>div> div>div> section> section class="space-around"> div>div> div>div> div>div> section> body> html>
