This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Why is this inline-block element pushed downward?
(8 answers)
Closed 3 years ago.
Take a look at the example below:
.item {
padding: 16px;
height: 50px;
}
.first {
background-color: red;
display: inline-flex;
}
.second {
background-color: green;
display: inline-flex;
align-items: center;
}
<div>
<div class="item first">1</div>
<div class="item second">2</div>
</div>
I'd like to understand why setting align-items: center on the second box made the first one pushed downwards.
Disclaimer: I know how to fix this problem, I just wanted to get an explanation, like for a dummy, why does it behave like that because I struggle to understand this behaviour.
Related
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 1 year ago.
This question is about understanding how flex effect the display of child elements. The centering is peripheral and not the point of the question. Please see comments below if the question does not make sense.
From my reading of how flex works it should do the opposite and make the child elements behave like block elements.
However, in this minimal example it makes the paragraph element behave like an inline element.
I am using flex to center content.
<style>
/* display flex should cause child elments to behave like block elements
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
*/
#wrapper{
display:flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
#image{
margin: 0px;
border: 1px dotted #888888;
}
#percentage{
margin: 0px;
font-size: 40px;
font-weight: bold;
border: 1px dotted #888888;
}
</style>
<div id="wrapper" >
<img id="image" src="https://upload.wikimedia.org/wikipedia/commons/1/1c/Crystal_128_penguin.png" alt="wikimedia" width="128" height="128">
<p id="percentage"> 10%</p>
</div>
Basically, flexbox has a default flex-direction of row that's why the elements are inline, to make them appear on like block elements you can set flex-direction to column.
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 2 years ago.
I know this question has been asked to death but I can't seem to make any of the solutions work. Please be sympathetic, I have been trying for days!
I want to vertically centre everything in the header element at the centre of its height. Eventually I plan on heaving a little logo, title and navigation links in the header. While the logo and title are floated to left, the navigation links need to stay floated to the right.
Why is vertical alignment made SO HARD in html/css!
I'd prefer a solution that does what I want directly and not consequently by fixing/padding/adjusting things around the elements but if that is the only way then fine. Here is what I have so far.
* {
border: 1px solid black
}
header h1 {
display: inline;
}
header nav {
display: inline;
float: right;
}
<header id='header'>
<h1>Obla Di Obla Da</h1>
<nav id="nav">
Evil |
Not Yet Evil
</nav>
</header>
Floats and inline elements are a nightmare when it comes to the vertical axis. You should take a look at using Flexbox - it really excels with intra-element positioning - namely its align-items: center property value (assuming you're using a flex row and not a flex column at which point you'll want justify-content: center)
Take a look at this snippet
* {
border: 1px solid black
}
#header {
background: #0095ee;
color: #fff;
}
.flex {
display: flex;
}
.align-center {
align-items: center;
}
.space-between {
justify-content: space-between;
}
<header id='header' class="flex align-center space-between">
<h1>Obla Di Obla Da</h1>
<nav id="nav">
Evil |
Not Yet Evil
</nav>
</header>
The other way that you see quite a bit is to use an absolute position on a a child, set the top to 50%, and set it's transform X translation to -50%, though this is less common now, due to the expanse and ease-of-use of flex, and the inherent issues that come with removing elements from the document flow.
.parent { position: relative; }
.vertical-child {
position: absolute;
top: 50%;
transform: translateX( -50% );
}
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Vertically align text next to an image?
(26 answers)
Flexbox: center horizontally and vertically
(14 answers)
How do I vertically align text in a div?
(34 answers)
Vertically centering a div inside another div [duplicate]
(24 answers)
Closed 4 years ago.
I am trying to center align a span inside a div, which also contains an img element.
.element {
display: inline-block;
}
.element img {
height: 40px;
width: 40px;
border-radius: 50%;
margin-right: 20px;
}
.element span {
display: inline-block;
}
<div class="element">
<img src="https://images.pexels.com/photos/35646/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<span>hello</span>
</div>
or see this fiddle
However the text wont vertical align. I have looked primary at this question. However vertical-align: middle does nothing here.
I also looked at this question. However I will rather avoid anything position: relative & position: absolute workarounds for this. I also tried messing the line-height with no luck.
I even tried to set height: 100%on the span, as this question suggests, but that does nothing either.
I basically looked at bunch of questions here on SO, it seems like css is so weird about this, that there basically is 12 approaches for a simple thing like this. Yet I can't seem to get 1 of them to work in my occasion.
What is up with this behavior?
EDIT:
Marked as duplicate to How to Vertical align elements in a div? - I have explained that these solutions with line-height and vertical align doesn't work in my case as explained in the original question. The accepted solution did not work in this case. How is it a duplicate?
The answer here is probably to use flexbox. If your flex-direction is row (which is default), you can use align-items to center the elements vertically and justify-content to justify the row to the left (the "start" of the flex container). Let me know if you have any questions!
.element {
align-items: center;
display: flex;
justify-content: flex-start;
}
.element img {
height: 40px;
width: 40px;
border-radius: 50%;
margin-right: 20px;
}
.element span {
display: inline-block;
}
<div class="element">
<img src="https://images.pexels.com/photos/35646/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<span>hello</span>
</div>
Use flexbox for this. Sample:
.element {
display: flex;
align-items: center;
}
Use align-items: center for vertical align and justify-content: center; if you need also horizontal align center.
This question already has answers here:
inline-block div with and without text not vertically aligned
(1 answer)
Align inline-block DIVs to top of container element
(5 answers)
CSS vertical alignment of inline/inline-block elements
(4 answers)
Closed 4 years ago.
How to put these red boxes in line? One in the middle jumps down for no reason.
nav label {
width: 50px;
height: 50px;
display: inline-block;
background-color: red;
}
<nav>
<label></label>
<label>2</label>
<label></label>
</nav>
I need to preserve empty labels empty.
You need to set the vertical-align and change its default value of baseline, which is the reason behind the unwanted result, to e.g. top:
nav label {
width: 50px;
height: 50px;
display: inline-block;
vertical-align: top; /* or "middle", "bottom" */
background-color: red;
}
<nav>
<label></label>
<label>2</label>
<label></label>
</nav>
This question already has answers here:
How to align flexbox columns left and right?
(5 answers)
Closed 5 years ago.
My goal is simple, stick the p tag to the right side of the custom css card, to make it stick to the left it is pretty straightforward.
custom-text {
margin-left: 30px;
}
To better illustrate this
The question is how do I make the $100 dollars always stick to the right?
and let say the value of the dollars change to $5, how to make it always on the right?
I can just use
custom-text-right {
margin-left: 450px;
}
but this solution doesn't scale to different value (Im using bootstrap just for your information)
HTML part:
<h4>Price: <span class="dollar">$3.15</span></h4>
you can do that using flexbox, with justify-content: space-between;
.card {
display: flex;
height: 500px;
width: 500px;
background: #000;
justify-content: space-between;
color: white;
padding: 30px;
box-sizing: border-box
}
<div class="card">
<span>Price:</span>
<span> $100</span>
</div>
You can use float: right or text-align:right