This question already has answers here:
Centering in CSS Grid
(9 answers)
Flexbox: center horizontally and vertically
(14 answers)
How can I vertically align elements in a div?
(28 answers)
How to vertically align text with icon font?
(10 answers)
Closed 2 years ago.
I know there are a thousand references to similar cases but trying to apply the solutions I do not see where I am making the mistake.
I have a parent element that distributes across the screen 3 blocks of info composed by a large icon and a descriptive text below.
In principle with the html and css that I show you below, I layout it as I want, but when I reduce the width of the descriptive text, so that it has the same width as the icon, although I apply it visually, it still respects the original width in layout. Then I include the inline-block and adjust the value perfectly.
But I have reached the point where I am not able to align the icon and text in the center.
I have tried applying a display: grid to the father, positioning them vertically but I can't find a way to center them.
Thanks in advance for your help and time
.options-resume {
display: flex;
justify-content: center;
}
.resume-subtitle {
color: #666b74;
font-weight: bold;
font-size: 38px;
padding: 45px 0 45px 0;
}
.resume-column {
display: inline-grid;
}
.resume-icons {
display: flex;
justify-content: space-around;
}
.resume-subtitle {
display: inline-block;
font-family: 'RalewayRegular';
font-size: 14px;
color: #666b74;
position: relative;
width: 58%;
text-align: center;
}
.icon-credit-card {
font-size: 220px;
}
.icon-support {
font-size: 220px;
}
.icon-phone {
font-size: 220px;
}
<div class="options-resume">
<h1 class="resume-subtitle">How to center vertically ?</h1>
</div>
<div class="resume-icons">
<div class="resume-column">
<label>
<i class="icon-credit-card"></i>
</label>
<p class="resume-subtitle">Lorem Ipsum is simply dummy text of the printing and typesett</p>
</div>
<div class="resume-column">
<label>
<i class="icon-phone"></i>
</label>
<p class="resume-subtitle">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="resume-column">
<label>
<i class="icon-support"></i>
</label>
<p class="resume-subtitle">Lorem Ipsum is simply dummy text of the prin</p>
</div>
</div>
I leave you also a codepen link with the behavior of my application but with images
https://codepen.io/CharlieJS/pen/VwaKRZj
Try this
.resume-column {
display: flex;
flex-direction: column;
align-items: center;
}
Related
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:
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:
CSS when inline-block elements line-break, parent wrapper does not fit new width
(2 answers)
Make container shrink-to-fit child elements as they wrap
(4 answers)
Closed 3 years ago.
I'm writting a badge-ish block.
The problem is with the 3rd block (1 (Something something)), as you can see in the snippet, it overflows to the next line and leaves extra space on the right.
What should I do to get rid of that space?
It would be tremendously great if it's pure CSS and doesn't involve jQuery.
Thanks!
section {
width: 8rem;
}
div {
margin-top: 1rem;
}
.outer {
background: blue;
display: inline-flex;
color: white;
font-family: Helvetica, Arial, sans-serif;
align-items: center;
justify-content: center;
min-height: 32px;
min-width: 32px;
}
<section>
<div class="outer">
1
</div>
<div class="outer">
Very very very long Textttttt
</div>
<div class="outer">
1 (Something something)
</div>
<div class="outer">
Test
</div>
</section>
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