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
Related
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>
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 1 year ago.
I am trying to put "per month" vertical-align to the price "$29" just like the picture.You can help me fix my code or give me a new way that is better for me.
This is what I want.
This is what I had
here is my HTML code.
<div class="deal">
<span class="price">$29</span>
<span class="period">per month</span>
</div>
and my css.
.price {
font-size: 50px;
}
.monthly {
color: #d0d3d4;
vertical-align: middle;
display: inline-block;
}
CSS
.deal{
display:flex;
align-items:center;
}
.period{
margin-left:0.5rem;
}
jsfiddle
.deal {
display: inline-flex;
align-items: center;
}
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
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Keep the middle item centered when side items have different widths
(12 answers)
Closed 4 years ago.
What I want as a result:
I have three elements in a container that is a display: flex I want the left item to be aligned to the left, and the right item to the right. With the center item aligned in the center.
space-between is not the fix. It is not the solution I am looking for. This is because the elements are differing widths. Even with differing widths, I still want the middle element to be centered.
This could be fixed with a wrapper. and then put a flex: 1 on the wrappers, then within those wrappers, have the elements themselves. Again, this is not the fix I am looking for. I cannot use wrappers in my situation.
.parentContainer {
display: flex;
justify-content: center;
align-items: center;
}
.parentContainer > *{
background: red;
text-align: center;
}
<div class="parentContainer">
<div class="left">small</div>
<div class="middle">medium element here</div>
<div class="right">longer element is here too</div>
</div>
The primary way to achieve this layout – because it's clean and valid – is with flex: 1 on the items. That method is explained in the following post, but is also ruled out in this question.
Keep the middle item centered when side items have different widths
An alternative method involves CSS absolute positioning:
.parentContainer {
display: flex;
justify-content: space-between;
position: relative;
}
.middle {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
/* non-essential decorative styles */
.parentContainer > * { background: orange; text-align: center; padding: 5px; }
p { text-align: center;}
p > span { background-color: aqua; padding: 5px; }
P > span:first-child { font-size: 1.5em; }
<div class="parentContainer">
<div class="left">small</div>
<div class="middle">medium element here</div>
<div class="right">longer element is here too</div>
</div>
<p>
<span>↑</span><br>
<span>true center</span>
</p>
This method is explained in the following posts:
Methods for Aligning Flex Items along the Main Axis (see Box #71)
Element will not stay centered, especially when re-sizing screen
I think you can use a different approach. This is my suggestion.
.parentContainer {
display: table;
width: 100%;
background: lightblue;
border-collapse: collapse;
}
.parentContainer > div {
display: table-cell;
width: 33%;
}
.parentContainer > div:nth-child(1) {
text-align: left;
}
.parentContainer > div:nth-child(2) {
text-align: center;
}
.parentContainer > div:nth-child(3) {
text-align: right;
}
<div class="parentContainer">
<div>small</div>
<div>medium element here</div>
<div>longer element is here too</div>
</div>