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/
Related
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
This question already has answers here:
Align 3 unequal blocks left, center and right
(4 answers)
Closed 8 months ago.
Trying to left, center, right the 3 pieces of text? Trying to use CSS and I'm stuck.
Thanks.
you could use flex and set justify-content to space-between
#text-container {
display: flex;
justify-content: space-between;
}
<div id="text-container">
<p>Left</p>
<p>Middle</p>
<p>Right</p>
</div>
You could use the flex property to solve this. You would have a parent div which contains all 3 of your children items. Depending on where the item is in your HTML code, the content will justify to its respective side. So if it's the first, it will be justified to the left. If it's the second, it will be justified to the middle. And if it's the third, it will be justified to the right. Here is how you would do it;
#bar {
display: flex;
}
#bar>* {
flex: 1;
display: flex;
}
#bar> :nth-child(1) {
justify-content: flex-start;
}
#bar> :nth-child(2) {
justify-content: center;
}
#bar> :nth-child(3) {
justify-content: flex-end;
}
<div id="bar">
<p>Left</p>
<p>Middle</p>
<p>Right</p>
</div>
I agree with the other responses. Check out this really helpful/visual website on flexboxes
You want to set the parent div as display: flex and depending on what you want to do, you can set
justify-content: flex-start for left,
justify-content: flex-end to right, and
justify-content: center to center.
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
I want to display a calculation with exponents (and more). To set the elements in line i use flexbox. Within the flexbox element i want to make use of the vertical-align CSS property. But the vertical-align property doesn't work.
I tested it with different approaches and in the end one solution worked. But then the justify-content property is not working anymore. in my attempt i used for the property: flex the webkit version: -webkit-box.
Here is the snipped in a fiddle if you want to test it: https://jsfiddle.net/oe3hxfma/
.calculation {
display: flex;
justify-content: center;
font-size: 1.3em;
}
.exponent {
display: inline;
vertical-align: super;
}
.calculationTwo {
display: -webkit-box;
justify-content: center;
font-size: 1.3em;
}
<div class="calculation">
3
<div class="exponent">
2
</div>
</div>
<div class="calculationTwo">
3
<div class="exponent">
2
</div>
</div>
How can i make use of the vertical-align when the parent elmenet is displayed as flexbox.
The vertical-align property works only with inline-level and table-cell elements (MDN).
Because the exponent element is a child of a flex container, it is automatically blockified (spec). This means it computes to a block-level element and vertical-align is ignored.
It doesn't matter how you define the display value for the flex item (e.g., in your code you have the flex item set to display: inline). In a flex formatting context, the display value of flex items is controlled by the flex algorithm.
The key to using vertical-align is to remove it from a flex formatting context. Create an element that is a child of the flex item. Now the exponent value is outside the scope of flex layout, and you can set it to display: inline.
Also, because the text is aligned to the top of the container, there is no space for vertical-align: super to work. So align the text to the center or bottom of the container.
Add align-items: flex-end or center (depending on how much superscripting you want).
.calculation {
display: flex;
justify-content: center;
align-items: flex-end;
font-size: 1.3em;
}
span {
vertical-align: super;
}
<div class="calculation">
3
<div class="exponent">
<span>2</span>
</div>
</div>
You should use "align-items" property to align items in vertical position:
.container {
align-items: stretch | flex-start | flex-end | center | baseline;
}
stretch: fit in the container,
flex-start: align item vertically upward,
flex-end: align items vertically downward,
center: align items to vertically center,
baseline: items are aligned such as their baselines align
just a suggestion, why don't you try to use sup HTML Tag for exponential?
<div>
3 <sup>2</sup>
</div>
and for vertical alignment, display:flex use align-items like in above answers.
div
{
display: flex;
justify-content: center;
}
<div>
3 <sup>2</sup>
</div>
.calculation {
display: flex;
justify-content: center;
align-items: flex-end;
font-size: 1.3em;
}
span {
vertical-align: super;
}
<div class="calculation">
3
<div class="exponent">
<span>2</span>
</div>
</div>
You could try give the content some padding and use the align-items: stretch feature of flex.
Here is a very useful guide to flex! It's awesome to keep it in your back-pocket as a front end developer!
Flexbox Guide!
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>