Center align container and left align child elements
There isn't an easy way to achieve the layout with plain CSS as far as I know. The following approach uses media queries to set the width of inner divs for different viewport sizes.
Consider to use Javascript if you have a rather large number of items, CSS preprocessors might be helpful too.
See code snippet and comments inline, also check out the jsfiddle example for easy testing.
body { margin: 10px 0;}.outer { text-align: center;}.inner { font-size: 0; /* fix for inline gaps */ display: inline-block; text-align: left;}.item { font-size: 16px; /* reset font size */ display: inline-block; margin: 5px; /* gutter */}.item img { vertical-align: top;}@media (max-width: 551px) { /* ((100+5+5)x5)+1 */ .inner { width: 440px; /* (100+5+5)x4 */ }}@media (max-width: 441px) { .inner { width: 330px; }}@media (max-width: 331px) { .inner { width: 220px; }}@media (max-width: 221px) { .inner { width: 110px; }}
<div class="outer"> <div class="inner"> <div class="item"><img src="//dummyimage.com/100"></div> <div class="item"><img src="//dummyimage.com/100"></div> <div class="item"><img src="//dummyimage.com/100"></div> <div class="item"><img src="//dummyimage.com/100"></div> <div class="item"><img src="//dummyimage.com/100"></div> </div></div>
Left, Right and Center Align Child div under Parent Div Container
Just give text-align:center property to container div.
JS fiddle - https://jsfiddle.net/72aqsq83/1/
.container{
border:1px solid;
padding:1px;
width:100%;
margin:1px;
text-align:center
}
How to align all child elements left when parent is aligned to the center- CSS
If you wrap the text in a div and make the parent element a flexbox, you can use margin-left: auto
on the text wrapper to push it all the way to the right without defining a specific value for the margin. And if you want to limit how wide the text can become, you can apply max-width: <whatever>px
to the wrapper. Fiddle
Note that this will not keep the text perfectly centered, but rather keep it all the way to the right. The fact that your last line is so much longer than the others does not produce an appealing visual effect. I think simply centering the wrapper with justify-content: center
is a better solution You can then apply a max-width there to force your text to break and keep the lines roughly even:
Fiddle
Alignment Property Container in Flutter
First, you have to understand that the alignment
property doesn't refer to Container
alignment, but to its child's alignment.
Imagine that what defines the alignment of the child is the corner it is touching. If you align it to the left, the child will touch the left corner. However, a child cannot be properly aligned if the parent doesn't fill all the space available, since if the parent takes the minimum possible space, the child will touch all corners of the parent. That's why the Container
has to fill all the space when you set an alignment, otherwise the child won't be able to respect that alignment.
In your case, if you don't want the orange box to fill all the space and still in the center, then wrap it in another container with the center alignment:
Container(
alignment: Alignment.center,
Container(
color: const Color(0xffe67e22),
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Text(_workoutCategories[index].name, style: TextStyle(color: Colors.white, fontSize: 24)),
),
),
)
Center one and right/left align other flexbox element
Below are five options for achieving this layout:
- CSS Positioning
- Flexbox with Invisible DOM Element
- Flexbox with Invisible Pseudo-Element
- Flexbox with
flex: 1
- CSS Grid Layout
Method #1: CSS Positioning Properties
Apply position: relative
to the flex container.
Apply position: absolute
to item D.
Now this item is absolutely positioned within the flex container.
More specifically, item D is removed from the document flow but stays within the bounds of the nearest positioned ancestor.
Use the CSS offset properties top
and right
to move this element into position.
li:last-child { position: absolute; top: 0; right: 0; background: #ddd;}ul { position: relative; padding: 0; margin: 0; display: flex; flex-direction: row; justify-content: center; align-items: center;}li { display: flex; margin: 1px; padding: 5px; background: #aaa;}p { text-align: center; margin-top: 0;}span { background-color: aqua;}
<ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li></ul><p><span>true center</span></p>
Center align multiple child DIV
If you want to horizontally align your elements centrally, then don't float them.
Change the way they are displayed to inline-block
and align them in the center by changing the text-align
style of their parent:
#parent { text-align:center; height:450px; width:75%; border:1px solid blue;}.center { display:inline-block; height:250px; width:15%; margin: 0 auto; border: 1px solid black;}
<div id="parent"> <div id="child1" class="center"></div><!-- --><div id="child2" class="center"></div><!-- --><div id="child3" class="center"></div></div>
Align one child element to the left when parent aligns all child elements to the center
There are multiple ways to go by this. But trying to visualize some of your future problems with this requirement when integrating with future code. The best way to do it is using different positions.
You want all div elements of a parent to be centered apart from one in particular. If you do not give a display property to the one div you want to the left it will NOT obey the parent's CSS rule: text-align:center;
I used the display property on all div elements that I want to be centered but I set the CSS rule: position:relative; to the parent. This will force all child divs with position:absolute; to be bound by the parent. Therefore I can set the properties top and left to the child div that I want to put on the left and these properties will be calculated based on the parent width and not the browser's window.
This is the best solution because a child div positioned absolute will not affect the structured template and therefore will not push centered div away from the center of the parent when you add more in future.
Here is your example:
http://jsfiddle.net/77wc17yo/
You can now move your left div using CSS properties: top, left, bottom, right.
.parent {
background:#fefefe;
padding:5px;
border:1px solid black;
text-align:center;
position:relative;
}
.centerd {
border:1px solid green;
background:gold;
padding:90px;
display:inline-block;
}
.left {
padding:40px;
border:1px solid red;
background:orange;
width:40px;
position:absolute;
left:0;
top:20px;
}
Aligning elements left and center with flexbox
EDIT: See Solo's answer below, it is the better solution.
The idea behind flexbox is to provide a framework for easily aligning elements with variable dimensions within a container. As such, it makes little sense to provide a layout where the width of one element is totally ignored. In essence, that is exactly what absolute positioning is for, as it takes the element out of the normal flow.
As far as I know, there is no nice way of doing this without using position: absolute;
, so I would suggest using it... but If you REALLY don't want to, or can't use absolute positioning then I suppose you could use one of the following workarounds.
If you know the exact width of the "Left" div, then you could change justify-content
to flex-start
(left) and then align the "Center" div like this:
#center {
position: relative;
margin: auto;
left: -{half width of left div}px;
}
If you do not know the width, then you could duplicate "Left" on the right side, use justify-content: space-between;
, and hide the new right element:
Just to be clear, this is really, really ugly... better to use absolute positioning than to duplicate content. :-)
#parent { align-items: center; border: 1px solid black; display: flex; justify-content: space-between; margin: 0 auto; width: 500px;}#right { opacity: 0;}
<div id="parent"> <span id="left">Left</span> <span id="center">Center</span> <span id="right">Left</span></div>
How to center a flex container but left-align flex items
Flexbox Challenge & Limitation
The challenge is to center a group of flex items and left-align them on wrap. But unless there is a fixed number of boxes per row, and each box is fixed-width, this is currently not possible with flexbox.
Using the code posted in the question, we could create a new flex container that wraps the current flex container (ul
), which would allow us to center the ul
with justify-content: center
.
Then the flex items of the ul
could be left-aligned with justify-content: flex-start
.
#container {
display: flex;
justify-content: center;
}
ul {
display: flex;
justify-content: flex-start;
}
This creates a centered group of left-aligned flex items.
The problem with this method is that at certain screen sizes there will be a gap on the right of the ul
, making it no longer appear centered.
This happens because in flex layout (and, actually, CSS in general) the container:
- doesn't know when an element wraps;
- doesn't know that a previously occupied space is now empty, and
- doesn't recalculate its width to shrink-wrap the narrower layout.
The maximum length of the whitespace on the right is the length of the flex item that the container was expecting to be there.
In the following demo, by re-sizing the window horizontally, you can see the whitespace come and go.
DEMO
A More Practical Approach
The desired layout can be achieved without flexbox using inline-block
and media queries.
HTML
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
CSS
ul {
margin: 0 auto; /* center container */
width: 1200px;
padding-left: 0; /* remove list padding */
font-size: 0; /* remove inline-block white space;
see https://stackoverflow.com/a/32801275/3597276 */
}
li {
display: inline-block;
font-size: 18px; /* restore font size removed in container */
list-style-type: none;
width: 150px;
height: 50px;
line-height: 50px;
margin: 15px 25px;
box-sizing: border-box;
text-align: center;
}
@media screen and (max-width: 430px) { ul { width: 200px; } }
@media screen and (min-width: 431px) and (max-width: 630px) { ul { width: 400px; } }
@media screen and (min-width: 631px) and (max-width: 830px) { ul { width:600px; } }
@media screen and (min-width: 831px) and (max-width: 1030px) { ul { width: 800px; } }
@media screen and (min-width: 1031px) and (max-width: 1230px) { ul { width: 1000px; } }
The above code renders a horizontally-centered container with left-aligned child elements like this:
DEMO
Other Options
Properly sizing and aligning the flex item(s) on the last row
Desandro Masonry
Masonry is a JavaScript grid layout library. It
works by placing elements in optimal position based on available
vertical space, sort of like a mason fitting stones in a wall. You’ve
probably seen it in use all over the Internet.source: http://masonry.desandro.com/
CSS Grid Layout Module Level 1
This CSS module defines a two-dimensional grid-based layout system, optimized for user interface design. In the grid layout model, the children of a grid container can be positioned into arbitrary slots in a predefined flexible or fixed-size layout grid.
source: https://drafts.csswg.org/css-grid/
Related Topics
Ellipsis For Overflow Text in Dropdown Boxes
How to Create Links With 'Target="_Blank"' in Markdown
Overflow:Hidden Dots At the End
Imitating a Blink Tag With Css3 Animations
Use Font Awesome Icon in Placeholder
Using "Margin: 0 Auto;" in Internet Explorer 8
How to Get Folder Directory from HTML Input Type "File" or Any Other Way
Angular 5 Formgroup Reset Doesn't Reset Validators
Why Would a Developer Place a Forward Slash At the Start of Each Relative Path
Redirect Website After Specified Amount of Time
Position Absolute and Overflow Hidden
How Do HTML Parses Work If They'Re Not Using Regexp
Font Rendering/Line-Height Issue on MAC/Pc (Outside of Element)
CSS - Make Divs Align Horizontally
What's the Difference Between HTML 'Hidden' and 'Aria-Hidden' Attributes