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>
Related
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
How can I horizontally center an element?
(133 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed last year.
I'm attempting to place an image in the center of the page. vertically and horizontally, regardless of screen size. How is this possible?
<label class="img-wrapper">
<img src="logo.jpg">
</label>
img {
margin-top: 25%;
margin-left: 25%;
margin-right: 25%;
margin-bottom: 25%;
padding: 10px;
}
Here's an image explaining what I'm trying to do. https://imgur.com/a/eVtfGdi
You can easily achieve is with flexbox. Try this
.img-wrapper {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
<label class="img-wrapper">
<img src="logo.jpg">
</label>
You can make use of flexbox to align elements. See the snippet below:
*{
margin: 0;
padding: 0;
}
.img-wrapper{
height: 100vh;
display: flex;
align-items: center; /*align items vertically*/
justify-content: center; /*align item horizontally*/
}
img {
width: 50vh;
height: 50vh;
}
<label class="img-wrapper">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fm.media-amazon.com%2Fimages%2FI%2F61yBDRJCKBL._SL500_.jpg&f=1&nofb=1">
</label>
More on flexbox here.
This question already has answers here:
How can I horizontally center an element?
(133 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
How to center a button within a div?
(16 answers)
Closed 1 year ago.
I am trying to make a button that goes in the centre of the screen I have tried lots of solutions which havent worked html:
<button align="center" type="button" onclick="location.href='https://discord.gg/AsA7P9B5Mv'" class="button">
<span align="center" class="button__test"> Join Server </span>
</button>
css:
.button {
text-align: center;
align: center;
justify-content: center;
align-items: center;
height: 10vw;
width: 25vw;
margin: 0;
padding: 0;
background: #10e321;
border: none;
outline: none;
border-radius: 1vw;
overflow: hidden;
font-size: 4vw;
cursor: pointer;
}
.button:hover{
background: #11d120;
}
.button:active{
background: #0eb31b;
}
Help would be greatly appreciated :)
There is a couple of options to center element, e.g.
CSS property position - always in the center of the screen
.button {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
Flexbox - children element will be always in the center of the parent. You can make the parent full screen.
.parent-element {
display: flex;
justify-content: center;
align-items: center;
}
You should use something like this:
<div style="text-align:center">
<input type="submit" />
</div>
Or you could use something like this. By giving the element a width and specifying auto for the left and right margins the element will center itself in its parent.
<input type="submit" style="width: 300px; margin: 0 auto;" />
.class {
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
<div class="class">
<button>html</button>
</div>
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 {
....
}
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
How do I vertically align text in a div?
(34 answers)
How can I vertically align elements in a div?
(28 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
I have a div with an anchor inside and I want this anchor to take the whole width of the div however, I would like to have the text of the anchor to be centered within the div, it's not working for me. I have tried this code:
.actions {
display: -webkit-flex;
display: flex;
}
.action {
background: #ef5b2b;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
margin: 5px;
text-align: center;
height: 100px;
position: relative;
}
.action a {
display: inline-block;
height: 100%;
width: 100%;
vertical-align: middle;
}
<div class="actions">
<div class="action-left action">
Hello 1
</div>
<div class="action-right action">
Hello 2
</div>
</div>
any help is appreciated.
Try this:
The .actions container needs to be flex so that the two actions containers will be evenly spaced, side by side.
Each .action container will hold the two anchor containers (which will be 100% height and width). Therefore, the .action containers only need to be width/height 100% themselves.
The a tags within the action containers need to be 100% height/width so that they fill the entire .action container. BUT, to center the text vertically and horizontally, you can use flex so that you can use justify-content: center and align-items:center - which makes the content within them centered both horizontally (justify-content) and vertically (align-items).
.actions {
width: 100%;
display: flex;
}
.action {
flex: 1;
position: relative;
width: 100%;
height: 100px;
margin: 5px;
background: #ef5b2b;
}
.action a{
height:100%;
width:100%;
display: flex;
justify-content: center;
align-items: center;
}
<div class="actions">
<div class="action-left action">
Hello 1
</div>
<div class="action-right action">
Hello 2
</div>
</div>
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 center text with CSS? [duplicate]
(37 answers)
How to center an element horizontally and vertically
(27 answers)
Closed 4 years ago.
I'm trying to align text to center (vertically and horizontally):
<div class="panel-small sport">
<b>Sport and Activity</b>
</div>
this is the css:
.panel-small *
{
text-align: center;
vertical-align: middle;
}
.sport
{
background-image: url("../img/sport.png");
left: 248px;
}
the text appear even on top
Try flex positioning:
display: flex;
justify-content: center;
align-items: center;
You can check this trick:
CSS:
text-align: center;
vertical-align: middle;
line-height: 90px; /* the same as your div height */
Here is the complete explanation: https://stackoverflow.com/a/5703632/5655917
Or you can use Flexbox with this:
CSS:
.panel-small *{
display: flex;
justify-content: center;
align-items: center;
}
Here more explanation: https://tutorialzine.com/2015/09/quick-tip-the-simplest-way-to-center-elements-vertically-and-horizontally
Regards!