This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
I'm using flex to put an image and a text in 1 line. I'd like to horizontally align the two. align-items: center didn't work at all.
align-items: flex-start; kind of horizontally aligned the two, but it's not precise.
Not sure what's going on here. I'm looking align the two horizontally very precisely, help would be appreciated. I tried adding style="vertical-align:middle;" to <img>, but didn't work either.
.entrepreneur {
display: flex;
align-items: flex-start;
vertical-align: middle;
}
.entrepreneur img {
width: 35px;
margin-top: 0;
margin-bottom: 0;
}
.entrepreneur #text {
margin-left: 10px;
margin-top: 0;
margin-bottom: 0
}
<div class="entrepreneur">
<img src="img/Mark.jpg" alt="">
<p id="text">Mark</p>
</div>
flex direction by default is by row. justify-content will center items on the horizontal axis and align-items will align items vertically. You can change the direction to column and then these flip.
#container{
display:
flex;
justify-content:space-evenly;
align-items:center;}
<div id='container'>
<img src='https://via.placeholder.com/350'>
<p>some text</p>
</div>
#container {
display: flex;
place-items: center;
}
p {
margin-left: auto; // Just an example
}
<div id="container">
<img src="https://via.placeholder.com/350">
<p>TEXT...</p>
</div>
About place-items: https://developer.mozilla.org/en-US/docs/Web/CSS/place-items
Related
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 1 year ago.
container in cross axis but align-items didnt work
here are html and css code
tanks for your answers :)
.banner .black .content {
display: flex;
flex-flow: column;
text-align: center;
align-items: center;
}
<div class="banner">
<div class="black">
<div class="content">
<h1>شرکت بازرگانی قطعات آسانسور</h1>
<button>تماس با ما</button>
</div>
</div>
</div>
Align-items/justify-items would align the element in the available space.
And since you have flex-flow as column, cross-axis is vertical and you need to use justify-content.
And for justify-content to work, the container's height needs to be more than the children's height.
I have given here a height of 300px as an example. You need to specify some height if you want justify-content to work.
.banner .black .content {
height: 300px;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
background-color: greenyellow;
}
h1, button {
background-color: yellow;
}
<div class="banner">
<div class="black">
<div class="content">
<h1>شرکت بازرگانی قطعات آسانسور</h1>
<button>تماس با ما</button>
</div>
</div>
</div>
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Closed 2 years ago.
I Have Div with a div and a p tag within it. I need the inner div (customImage) to be on the left while the text is next to it but centered.
here is the HTML
<div class="custom_hdr">
<div class="customImage">
</div>
<p>WITH PAD</p>
</div>
You can _use flex and align-items: center; to achieve it.
.custom_hdr {
display: flex;
/* justify-content: center; */
align-items: center;
background-color: aliceblue;
max-width: 250px;
justify-content: space-between;
padding: 10px;
}
.customImage {
width: 100px;
background-color: #dedeb9;
height: 100px;
}
img.user_pro {
width: 100%;
}
<div class="custom_hdr">
<div class="customImage">
<img src="https://graph.facebook.com/10212529711337983/picture?type=large" alt="" class="user_pro">
</div>
<p>WITH PAD</p>
</div>
Add display:flex in your custom_hdr class
This question already has answers here:
How do I center floated elements?
(12 answers)
How can I horizontally center an element?
(133 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
I'm just wondering why margin auto isn't working? my parent div margin auto works but my inner margin auto is not in center.
.rankings_page{
width: 750px;
background-color: #f5f5f5;
margin: auto;
height: 800px;
}
.tab-group {
margin: auto;
}
.toggle_btn{
background-color: blue;
float: left;
width: 30%;
text-align: center;
cursor:pointer;
}
<div className="rankings_page">
<div className="tabgroup">
<div className="toggle_btn">
Country
</div>
<div className="toggle_btn">
City
</div>
</div>
</div>
</div>
Thanks!
The margin: auto trick only works if you want to horizontally center your elements. It will not work to vertically center your elements, because of how CSS deals with vertical margins differently.
You should use CSS flexbox instead: it is specifically made to allow layouts like this possible:
display: flex;
align-items: center;
justify-content: center;
Also, you need to update the tabgroup selector, because there is no - in the class in your markup. See proof-of-concept example:
.rankings_page {
width: 750px;
background-color: #f5f5f5;
height: 800px;
display: flex;
align-items: center;
justify-content: center;
}
.tabgroup {
display: flex;
}
.toggle_btn {
background-color: blue;
cursor: pointer;
}
<div class="rankings_page">
<div class="tabgroup">
<div class="toggle_btn">
Country
</div>
<div class="toggle_btn">
City
</div>
</div>
</div>
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
How do I vertically align text in a div?
(34 answers)
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 3 years ago.
As shown in this fiddle, I have a set of divs. I want them to stretch over the available vertical space and to keep their contents vertically centered. And I'm a great fan of flex, too. In the markup below, I get stuck.
<div class="outer">
<div class="inner">Uno</div>
<div class="inner">Duo</div>
</div>
Using the class below, the stretch is there but the text is at the top.
.beep { align-self: stretch; ... }
When I switch to this, the centering occurs as required but the stretch disappears.
.boop { align-self: center; ... }
How should I approach it to work as I want? I've tried playing around with the following styles both on the component itself and its parent.
.blopp{
vertical-align: middle;
align-items: stretch;
align-content: stretch;
}
Finally, I got it working but using a horrible set of parent-child-grandparent-subchild atrocity as HTML markup. Even I can see that it's an ugly hack that will bite me in the donkey being obviously unstable.
As far I'm experienced with display flex, it's my understanding that things are easy or you do it wrong. Well, this was not easy...
For you rest elements (which is also a flexbox), you should be using align-items: center for centering the text inside (you have used align-self: center which centers the rest as a flex item inside the outer flexbox).
See demo below:
div.outer {
font-family: "Open Sans", Arial, Helvetica, sans-serif;
display: flex;
width: 100%;
height: 101px;
border: 3px solid pink;
}
div.inner {
padding: 10px;
background: lightgray;
border: 1px solid darkgray;
display: flex;
}
div.first {
flex: 3;
}
div.rest {
flex: 1;
justify-content: flex-end;
align-items: center; /* <-- note this */
}
<div class="outer">
<div class="first inner">I'm the first</div>
<div class="rest inner">we're</div>
<div class="rest inner">the</div>
<div class="rest inner">rest</div>
</div>
This question already has answers here:
Vertically align text next to an image?
(26 answers)
How can I vertically align elements in a div?
(28 answers)
Why can't the <p> tag contain a <div> tag inside it?
(6 answers)
Closed 3 years ago.
Say I have the following code
p {
display: inline;
}
div {
display: inline-block;
width: 100px;
height: 50px;
background: black;
}
<p>
Some text
<div>
</div>
</p>
What is created is this
Here the inline and inline-block elements are not vertically centered.
How would I make it look like this :
I have used flex css and also add one new div
I hope this will help you.
p {
display: inline;
margin: 0;
}
.inner-div {
display: inline-block;
width: 100px;
height: 50px;
background: black;
}
.outer-div{
display: flex;
align-items: center;
display: -webkit-flex;
-webkit-align-items: center;
}
<div class="outer-div">
<p>Some text</p>
<div class="inner-div"></div>
</div>
just add float left to tag
p{
display: inline;
float:left;
}
This will align both element properly