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>
Flexbox row center one item and not the other
Just use margin-left: calc(50% - 100px);
for .box.left
This centers the blue box.
.container {
display: flex;
flex-direction: row;
align-items: center;
}
.box.right-item {
background: red;
width: 200px;
}
.box.left {
background: blue;
width: 200px;
height: 20px;
margin-left: calc(50% - 100px);
/* ↑ half of the width */
}
<div class="container">
<div class="box left">
xx
</div>
<div class="box right-item">
yy
</div>
</div>
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>
Aligning elements left, center and right in flexbox
Use nested flex containers and flex-grow: 1
.
This allows you to create three equal-width sections on the nav bar.
Then each section becomes a (nested) flex container which allows you to vertically and horizontally align the links using flex properties.
Now the left and right items are pinned to the edges of the container and the middle item is perfectly centered (even though the left and right items are different widths).
.nav { display: flex; height: 50px; /* optional; just for demo */ background: white;}
.links { flex: 1; /* shorthand for: flex-grow: 1, flex-shrink: 1, flex-basis: 0 */ display: flex; justify-content: flex-start; align-items: center; border: 1px dashed red;}
.header-title { flex: 1; display: flex; justify-content: center; align-items: center; border: 1px dashed red;}
.logout { flex: 1; display: flex; justify-content: flex-end; align-items: center; border: 1px dashed red;}
.links a { margin: 0 5px; text-decoration: none;}
<div class="nav mobilenav">
<div class="links"> <a href="/institutions/">Institutioner</a> <a href="/leaders/">Ledere</a> </div>
<div class="header-title">Institution institution 1</div>
<div class="logout"><a class="button-dark" href="/user/logout">Log ud</a></div>
</div>
Using flex, one element centrally aligned and others spaced between the centre and right
Here's a clean and simple process to get you to your layout:
First, note that CSS pseudo-elements (i.e., ::before
and ::after
), when applied to flex containers, are treated as flex items.
Create a pseudo-element to serve as the first flex item in the container.
Make the pseudo consume all available space (i.e., set it to
flex: 1
)Do the same with your button group (
.btn-group
) on the opposite end (i.e., set it toflex: 1
)
Now, with the outer items pressuring from both sides, the title is pinned to the middle of the container.
Make the button group container a flex container.
Set that container to
justify-content: center
.
Now, the individual buttons are horizontally centered on the right side of the already centered title.
.header { display: flex; height: 50px; align-items: center;}
.header::before { content: ""; flex: 1;}
.btn-group { flex: 1; display: flex; justify-content: center;}
<div class="header"> <h1 class="title">1</h1> <div class="btn-group"> <button id="btn_1" class="selected">2</button> <button id="btn_2">3</button> <button id="btn_3">4</button> </div></div>
Center when only a single item in flexbox
.footer > :only-child
{
margin-left: auto;
margin-right: auto;
}
Flexbox align one element center and another at the bottom of the page
you can use position
.
Add position:relative;
to .inner_content
and position:absolute;
and bottom:0;
to .inner_content p
so your css looks like this
.flex {
align-items: center;
display: flex;
}
aside {
background: url('../img/sidebar-image.jpg') no-repeat center/cover;
height: 20em;
width: 100vw;
float: left;
}
.inner_content {
justify-content: center;
flex-direction: column;
height: inherit;
width: inherit;
position: relative;
}
.inner_content p {
font-size: 14px;
margin-top: 2em;
color: #FFF;
position: absolute;
bottom:0;
}
but you can do this in multiple ways
here is a link to a similar question explaining this in multiple ways:
Center and right align flexbox elements
Related Topics
Playing M3U8 Files With HTML Video Tag
How to Auto-Resize an Image to Fit a 'Div' Container
Why Doesn't the Height of a Container Element Increase If It Contains Floated Elements
How to Overlay One Div Over Another Div
How to Change the Style of the Title Attribute Inside an Anchor Tag
My Inline-Block Elements Are Not Lining Up Properly
Is It Valid to Replace Http:// With // in a ≪Script Src="Http://..."≫
What Are the Implications of Using "!Important" in Css
Css Overflow-X: Visible; and Overflow-Y: Hidden; Causing Scrollbar Issue
Is Putting a Div Inside an Anchor Ever Correct
Is There a ≪Meta≫ Tag to Turn Off Caching in All Browsers
Center Image Using Text-Align Center
How to Nest a ≪Button≫ Element Inside an ≪A≫ Using Html5
How to Keep Two Side-By-Side Div Elements the Same Height
How to Remove Blue Highlight on Hover in Select, Option Inputs HTML for Chrome
How to Use CSS to Show on Hover Tool-Tips Using the Same Text Which Is Shortend With Ellipses