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;
}
Related
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 1 year ago.
The community reviewed whether to reopen this question 1 year ago and left it closed:
Original close reason(s) were not resolved
I can't get the align-self: center property to work on an a tag
.container {
margin-bottom: 1rem;
background-color: red;
}
.container-link {
display: flex;
align-self: center;
padding-left: 2rem;
height: 50px;
}
<div class="container">
<a class="container-link" href="google.com">link</a>
</div>
<div class="container">
<a class="container-link" href="#">link</a>
</div>
Howcome those links aren't aligned in the center now...?
I tried adding flex to the container too but no go
.container {
margin-bottom: 1rem;
background-color: red;
display: flex;
}
.container-link {
display: flex;
align-self: center;
padding-left: 2rem;
height: 50px;
}
<div class="container">
<a class="container-link" href="google.com">link</a>
</div>
<div class="container">
<a class="container-link" href="#">link</a>
</div>
Why does this not work either?
align-self: flex-end not working in flexbox
You're applying flex properties to a child of a block element. Such
properties will be ignored because you're in a block formatting
context.
Switch from display: block to display: flex to establish a flex
formatting context.
My parent is flex
can't get align-self to work in a flexbox container
Again, same rebuttal, I am flexing and my container is flex?
Why does align self center not work?
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:
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)
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
This question already has answers here:
How can I horizontally center an element?
(133 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
How do I vertically center text with CSS? [duplicate]
(37 answers)
How do I vertically align text in a div?
(34 answers)
How to vertically align an image inside a div
(37 answers)
Closed 4 years ago.
I have two p and one div.
I would that text get vertically centred.
<div class="toggle-area">
<p>SEARCH BY</p>
<div class="switch-inner">
<p class ="toggle-inline">Business group</p>
<div class="toggle-btn toggle-inline">
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
<p class="toggle-inline">Borrower</p>
</div>
</div>
Here's the CSS :
.toggle-btn {
margin: auto;
text-align: center;
}
.toggle-area {
padding-top:31px;
padding-bottom: 30px;
text-align: center;
}
.toggle-inline {
display: inline;
line-height: 100%;
}
.search-input {
text-align: center;
width: 400px;
margin: auto
}
.switch-inner {
vertical-align: middle;
}
The div contains a switch toggle input . the detailed css is here
Here's the actual behavior
And here's what I would