This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 4 months ago.
I was centering the elements of my page with:
display: block;
margin-left: auto;
margin-right: auto;
but when I try to do this with one div that has two buttons they stay in the left corner, why? and how I place them in the center.
Option 1
If both the buttons are inside the div container you also need to specify the width of the div container, because by default div covers the complete width.
div{
max-width:10rem;
margin :0px auto;
}
<div>
<button>Button1</button>
<button>Button2</button>
</div>
Option 2
You can also flex the div container to center the buttons
div{
display:flex;
align-items:center;
justify-content:center;
}
<div>
<button>Button1</button>
<button>Button2</button>
</div>
Option 3
You can also use the simple text align center property on the div container so it will center the buttons
div{
text-align:center;
}
<div>
<button>Button1</button>
<button>Button2</button>
</div>
because buttons are inline elements.
Not sure about the context but you can use this centering pattern (both horizontal and vertical) with Flexbox as well:
.container {
display: flex;
align-items: center;
justify-content: center;
}
Positioning is very easy with flexbox. Please try following properties on your div
display: flex;
justify-content: center;
align-items: center;
Justify content will place content centrally along horizontal axis and align items will place content centrally along vertical axis (for flex direction row which is default)
The div css:
text-align: center
Related
Trying to position "Certamente não" and "Certamente Sim" at the same height.
Using margin top doesn't seem to align them correctly.
You can use "flexbox" to align them. For example:
.parent {
display: flex;
align-items: center;
}
<div class="parent">
<span>Certamente não</span>
<span>Certamente Sim</span>
</div>
Learn more about flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 1 year ago.
I'm trying to align center vertically each element of a div but I can't do it. I have tried with vertical align but it isn't working. What is going wrong?
I want each element centered like this
.banner {
display: flex;
justify-content: center;
align-items: center;
}
<section class="banner" id="banner">
<div class="banner-text">
<h2>Hola, yo soy <span>Diego Donoso</span>.</h2>
<h3>Técnico Analista Programador.</h3>
Sobre Mí
</div>
</section>
when u are making .banner a flexbox then it aligns its direct child not the child inside the child(.banner-text), due to this the align properties are applied to .banner-text not to the content inside .banner-text this might help you, make the div(banner-text) a flexbox too, and then use property justify-content to horizontally align and align-items to vertically align it. Try out this:
.banner-text {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
}
<section class="banner" id="banner">
<div class="banner-text">
<h2>Hola, yo soy <span>Diego Donoso</span>.</h2>
<h3>Técnico Analista Programador.</h3>
Sobre Mí
</div>
</section>
i think you can achieve this with simpler approach like this:
.banner{
text-align:center;
}
.banner h2, .bannerh3{
line-height:28px;
}
please check this https://jsfiddle.net/2djyza47/
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 1 year ago.
So I'm using a flexbox in my webpage , and I have two elements in it.
I want the first element to be aligned center and the second on to be aligned towards the right. I am able to align them to the center with flexbox properties, but I'm not able to align the second one to the left. Float: right doesn't work apparently.
Here's my code:
Html:
<div>
<p> Hello </p>
<span> Hey! </span>
</div>
Css:
div {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
span{
float: right;
}
Here's a fiddle attempt.
since you are using flex,it is seeing you justify-content: center;
So you need to write something which overwrites it and which is:
span{
justify-content: flex-end;
}
to align the right
This question already has answers here:
How to vertically align text inside a flexbox?
(13 answers)
Closed 1 year ago.
I am creating a header and ideally would like the title to the left and the navbar icon over to the right. I can achive this using a parent div set to dislay: flex with justify-content: space-between as seen below.
Using Flex
However the I cannot apply vertical align in this instance to centrally align the text and icon horizontally. I suppose I could use margin to get it looking correct but not sure if this is best approach.
On the other hand I could do something like this using display: inline-block however am then lost on how to postion the icon over to the right.
Using inline-block
My question is which method is better and additionally how I achive the desired functionaility so that the text sits on the left side with the icon on the right side of the viewport ensuring they are both vertical aligned?
You can use align-items to vertically align flex items along the Cross Axis in a row layout.
Specifically, align-items: center so the flex items margin boxes are centered within the line on the cross-axis. Have a look at the updated CodeSandbox Demo
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
<div class="container">
<h4>Workbench</h4>
<span>☰</span>
</div>
Is this what you're trying to accomplish?
header {
display: flex;
justify-content: space-between;
align-items: center;
}
<header>
<h1>
Text
</h1>
<div>
Some Icon
</div>
</header>
You can use align-items: center. Since your flex direction is row, align-items: center will control the vertical alignment.
div {
display: flex;
justify-content: space-between;
width: 80%;
align-items: center;
}
If i understood well align-items: center; paired with justify-content: space-between should do the trick
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 5 years ago.
It seems such a simple scenario in my head.
I have a container div that has two child elements, the first of which should appear in the top left corner, and the second should appear dead central.
I've tried to use space-between when using the the justify-content property of Flex on the container.
This splits the content into the top-left and top-right corners.
The element in the top-right corner needs to pull-left until it is dead central.
I can't think of a way to achieve this.
I don't want to make a third hidden element, as that seems like a hack.
#container {
display: flex;
justify-content: space-between;
}
<div id="container">
<div>TOP LEFT</div>
<div>DEAD CENTER</div>
</div>
Just add width: 50%; to the container and you are good to go
#container {
display: flex;
justify-content: space-between;
width: 50%;
}
<div id="container">
<div>TOP LEFT</div>
<div>DEAD CENTER</div>
</div>
And if you want the second item to be exactly in the center add transform:translateX(50%);, this will move it according to its width
#container{
display:flex;
justify-content: space-between;
width: 50%;
}
#container div:nth-child(2){
transform:translateX(50%);
}
<div id="container">
<div>TOP LEFT</div>
<div>DEAD CENTER</div>
</div>