This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
In my web site I have blocks that describe site features. In this block there are div element which contains img, and I want to align the image vertically in middle of the div, but my code don't working. My html code -
<div class="col-3 feature_block">
<div><img src="{{ URL::asset('pic/services1.svg') }}"/></div>
<h4>Işiň awtomatizasiýasy</h4>
<p>Awtomatlaşdyrylan proses ullanyjynyň ulgama giren badyna başlaýar.</p>
</div>
My css code -
.feature_block div{
width: 80px;
height: 80px;
border-radius: 50%;
margin: 25px 0 25px 0;
background-color: white;
text-align: center;
line-height: 80px;
vertical-align: middle;
}
What happens in browser -
screenshot of browser
Please help, thank you
This works
.feature_block div{
display:flex;
justify-content:center;
align-items:center;
}
Your class name is col-3.
So your CSS should be like this :
.col-3 div {
....
}
Related
This question already has answers here:
How to vertically align an image inside a div
(37 answers)
How can I horizontally center an element?
(133 answers)
How can I vertically align elements in a div?
(28 answers)
Closed 1 year ago.
I'm trying to center an image inside an h1 tag and I'm missing something and don't know what it is
https://jsfiddle.net/jbzt38Le/5/ you can find a demo right over here but I will explain anyways
inside my html I have a div like this
<div>
<h1>
<span>Load clients:</span> <br/>
<span><img src="https://i.ibb.co/tMb04W4/ok.png" alt="logo"></span>
<span>Step 2: Ok </span>
</h1>
</div>
and over the css i manage to arrange the image size like this
div > h1 > span > img {
max-width: 10%;
height: auto;
}
But now, the image (or text) is not centered with the other.
sadly I can't use flexbox because it's and email template and not all the providers are supporting flex at the moment :(
What am I missing?
Just add text-align:center to the h1 like that:
div > h1 > span > img {
max-width: 10%;
height: auto;
}
h1 {
text-align:center;
}
You can use the image as background image and then center it with: margin: 0 auto;
div > h1 > span > img {
max-width: 10%;
height: auto;
}
div {
text-align: center;
}
.ci {
background: url(https://i.ibb.co/tMb04W4/ok.png) no-repeat center center;
background-size:100px;
height: 100px;
width: 100px;
display:block;
margin: 0 auto;
}
<div>
<h1>
<span>Load clients:</span> <br/>
<span class="ci"></span>
<span>Step 2: Ok </span>
</h1>
</div>
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.
I have an HTML element inside another. How can I center it by two dimensions of a wrapper at one time using CSS?
I'm trying this code:
.wrapper {
heigth: 10rem;
width: 100%;
background-color: black;
text-align: center;
}
.element {
padding: 0.25rem 0.5rem;
color: white;
border: 1px solid white;
}
<div class="wrapper">
<div class="element">Some element</div>
</div>
But it centers the element only horizontally, not vertically.
Are there any ways to solve this problem?
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Flexbox: center horizontally and vertically
(14 answers)
How do I vertically align text in a div?
(34 answers)
How do I vertically center text with CSS? [duplicate]
(37 answers)
Closed 3 years ago.
How do I align this content word in middle of rectangle. Word 'test' is on the top. I used everything, text-align:center; vertical-align:middle,
justify-content:center, align-items: center, and still not working
.rectangle {
height: 75px;
width: 75px;
color:white;
background-color: rgb(77,77,77);
border-radius:7px;
text-align:center;
vertical-align:middle;
justify-content:center;
align-items: center;
}
<div class="rectangle">
Test
</div>
You almost had it. You're using the properties justify-content and align-items, but not the flex display that these properties require to work. Furthermore, I removed text-align: center and vertical-align: middle, as they are no longer needed.
.rectangle {
height: 75px;
width: 75px;
color:white;
background-color: rgb(77,77,77);
border-radius:7px;
display: flex;
justify-content:center;
align-items: center;
}
<div class="rectangle">
Test
</div>
You forgot to add display: flex or display:grid :)
.rectangle {
height: 75px;
width: 75px;
color: white;
display: flex;
background-color: rgb(77, 77, 77);
border-radius: 7px;
justify-content: center;
align-items: center;
}
<div class="rectangle">
Test
</div>
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 7 years ago.
I am creating a website and I have a div which sets the main (called page) and max width of the main content. How would I in CSS set another div to be 50% of the page so it will always be centred. Thanks.
Main content Div:
#page{ /* Sets page width and colour*/
margin-left: 200px;
min-width: 400px;
max-width: 982px;
background-color: #FFFFFF;
padding-bottom: 5px;
}
EDIT:
<div class="Serverimg">
<div class="CenterDiv">
<img src="C:\Users\Corey\Documents\Web Project\images\serverroom.jpg" class="ServerRoom" alt="" style="width:400px;height:300px": />
</div>
</div>
WITH CSS:
#CenterDiv {
width: 50%;
margin: 0 auto;
}
To do this you put another div inside of it and add the following CSS:
#centerDiv {
width: 50%;
margin: 0 auto;
}
What you are doing is telling the centerDiv to always be 50% of the width of page and then assigning it equal margins on either side so it floats in the center.
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 8 years ago.
I've tried about 6-7 different methods for centering this text vertically so it remains responsive and in the center of the div.
here is a fiddle: http://jsfiddle.net/p2NLK/
I've tried using positioning such as
margin-top: 40%;
or
margin-top: 20em;
to the h1 element to push the text down but its not fluid at all and breaks a lot.
Have you tried
<div style="text-align: center;">
Works for horizontal center.
Try this for vertically centered.
or
CSS
body, html, #wrapper {
width: 100%;
height: 100%
}
#wrapper {
display: table
}
#main {
display: table-cell;
vertical-align: middle;
text-align:center
}
HTML
<div id="wrapper">
<div id="main">
Content goes here
</div>
</div>
Hope this helps.
Do leave a feed back.
try this:
replace margin-top: 40%; to following css
display: table-cell;
vertical-align: middle;
text-align:center;