This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 8 months ago.
I am trying to build a logout button into my website, it should be on the left side in the containing <div>. I am trying to build it in an upper <div> that contains some text, that should not be moved away from the middle. So how do I solve this problem (is there maybe a way without using position: absolute
.text-center {
text-align: center;
}
<div class="text-center">
<button>Logout</button>
Title
</div>
Do you mean something like this?
.appBar {
background-color: teal;
display: flex;
justify-content: 'space-around';
align-items: 'center';
height: 2.5rem;
}
.titleSection, .actionSection {
display: flex;
align-items: center;
justify-content: center;
}
.titleSection {
flex-grow:1;
}
<div class="appBar">
<div class="titleSection">
Title
</div>
<div class="actionSection">
<button>Logout</button>
</div>
</div>
Related
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 6 months ago.
<main>
<div class="container">
<div class="slider">
<img src="img/frame-1.jpg" width="1300px" height="500px" alt="#">
</div>
</div>
</main>
CSS
.slider{
display: flex;
justify-content: center;
align-items: center;
}
i am not able to center this img using align-items: center property
try removing the
.slider{
display: flex;
justify-content: center;
align-items: center;
}
and adding the below code.
main {
min-height: 100vh;
display: grid;
place-content: center;
}
adjust the main tag height to your liking but it should be big enough to fill the gap i.e (100vh - (header + footer))
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:
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
This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 3 years ago.
My question is simple, I have a <div> with two <p> tags inside of it, I want one centered vertically in the <div> and the other to be at the bottom, is there a simple and clean way to achieve this?
Here is the code: https://jsfiddle.net/xpm7fsoh/
.App {
display: flex;
text-align: center;
}
.Container {
color: #fff;
background-color: red;
padding: 50px;
display: flex;
height: 50vh;
}
.One {
display: flex;
align-items: center;
}
.Two {
display: flex;
align-items: flex-end;
}
<div class="App">
<div class="Container">
<p class="One">Hello</p>
<p class="Two">World</p>
</div>
</div>
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 4 years ago.
I'm working to make a button and a title (text) in the same line. However, the title needs to be in the center, while the button stays on the left corner.
I've tried to center align the title, but the title stays right next to the button, instead of the center.
<button id="icon">Button</button>
<h1 id="title">Title</h1
#title {
font-size: 12px;
text-align: center;
display: inline;
}
#icon {
display: inline;
}
Expected:
|[button]--------[centered title]--------|
Actual:
|[button][title]-------------------------|
Quick and easiest way I would recommend is with flexbox.
<div id="container">
<button id="icon">Button</button>
<h1 id="title">Title</h1>
</div>
#title {
font-size: 12px;
text-align: center;
flex: 5;
}
#icon {
flex: 1;
}
#container {
display: flex;
}
Great intro to flexbox if you've never used it:
https://www.youtube.com/watch?v=k32voqQhODc