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 12 months ago.
I am trying to align text horizontally and vertically inside buttons. I checked tons of solutions, no joy.
This is what I have right now:
<div class="buttonx">
Text
text text<br>text
text
text
text
</div>
<style>
.buttonx {
display: flex;
flex-wrap: wrap;
}
.buttonx a {
display: table;
background-color: #a00c1a;
width: 120px;
line-height: 20px;
margin: 10px;
text-decoration: none;
color: rgb(0, 0, 0);
text-align: center;
align-items: center;
color: white;
}
</style>
The text comes out as aligned horizontally, but not vertically. Please help.
Change only your buttonx class like that:
.buttonx {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}
.buttonx {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}
.buttonx a {
display: flex;
align-items: center;
justify-content: center;
background-color: #a00c1a;
width: 120px;
line-height: 20px;
margin: 10px;
text-decoration: none;
color: rgb(0, 0, 0);
text-align: center;
color: white;
height:40px;
}
<div class="buttonx">
Text
text text<br>text
text
text
text
</div>
Note I also remove from your buttonx a class some css properties.
.buttonx {
display: flex;
flex-wrap: wrap;
}
.buttonx a {
display: flex;
align-items: center;
justify-content: center;
background-color: #a00c1a;
width: 120px;
line-height: 20px;
margin: 10px;
text-decoration: none;
color: rgb(0, 0, 0);
text-align: center;
color: white;
}
<div class="buttonx">
Text
text text<br>text
text
text
text
</div>
Related
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 5 months ago.
So I'm kind of a begginner and I just encountered a problem that I don't know how to solve.
Here is the code:
https://jsfiddle.net/upwaqyek/
.parent{
display: flex;
flex-wrap: wrap;
border: #000000 2px solid;
justify-content: center;
}
.parent div {
width: 300px;
height: 50px;
background-color: rgba(197, 197, 197, 0.788);
border: #000000 solid 2px;
border-radius: 10px;
margin: 10px;
transition-duration: 3s;
text-align: center;
align-items: center;
}
I can't center the text. I think it has to do with the width and height but it really doesn't move at all. The text just stays static there at the bottom of the div and doesn't do anything when I change the div height.
I want the text to be in the center of the div, both horizontally and vertically.
Just add this two properties to your .parent div. Of-course there are lots of ways to do this, but I'm writing answer base on your existing code.
.parent div {
// your others styles
display: flex;
justify-content: center;
}
.parent{
display: flex;
flex-wrap: wrap;
border: #000000 2px solid;
justify-content: center;
}
.parent div {
width: 300px;
height: 50px;
background-color: rgba(197, 197, 197, 0.788);
border: #000000 solid 2px;
border-radius: 10px;
margin: 10px;
transition-duration: 3s;
text-align: center;
align-items: center;
display: flex;
justify-content: center;
}
.parent div:hover {
background-color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="parent">
<a>
<div><h2>Text</h2></div>
</a>
<div><h2>Text</h2></div>
</div>
</body>
</html>
for the targeted div, add display: flex; to it, then to center its content horizontally, add justify-content: center; and to center its content vertically add align-items: center;
.parent{
display: flex;
flex-wrap: wrap;
border: #000000 2px solid;
justify-content: center;
}
.parent div {
width: 300px;
height: 50px;
background-color: rgba(197, 197, 197, 0.788);
border: #000000 solid 2px;
border-radius: 10px;
margin: 10px;
transition-duration: 3s;
text-align: center;
align-items: center;
display: flex;
justify-content: center;
align-items: center;
}
.parent div:hover {
background-color: white;
}
<div class="parent">
<a>
<div>
<h2>Text</h2>
</div>
</a>
<div>
<h2>Text</h2>
</div>
</div>
You can center the text by making the container div a flexbox:
.parent div {
display: flex;
justify-content: center; /*center horizontally */
align-items: center; /* center vertically */
}
Your text is pushed down because h2 tags have a default not 0 margin (The margin varies between browsers).
It's not necessary, but I would recommend setting the margin value for header tags to 0.
h1, h2, h3, ... {
margin: 0;
}
This question already has answers here:
How can I horizontally center an element?
(133 answers)
How to center a button within a div?
(16 answers)
Closed 5 months ago.
I have the following code in index.html
h1 {
margin-top: 10px;
margin-bottom: 10px;
display: flex;
justify-content: center;
}
#count-el {
font-size: 50px;
display: flex;
justify-content: center;
}
#increment-btn {
background: red;
color: white;
font-size: 40px;
display: flex;
justify-content: center;
}
<h1>People entered:</h1>
<h2 id="count-el">0</h2>
<button id="increment-btn">Increment</button>
Flex works in all elements except for the <button> element. It doesn't center it. Why is that?
Most browsers display button elements as inline-block by default, so, it won't occupy 100% of parent's width. If you apply width 100% it will center the text, just like h1, h2. If you want to center the button itself you can use margin: 0 auto; property.
h1 {
margin-top: 10px;
margin-bottom: 10px;
display: flex;
justify-content: center;
}
#count-el {
font-size: 50px;
display: flex;
justify-content: center;
}
#increment-btn {
width: 100%;
background: red;
color: white;
font-size: 40px;
display: flex;
justify-content: center;
}
<h1>People entered:</h1>
<h2 id="count-el">0</h2>
<button id="increment-btn">Increment</button>
add to your button class margin-left: auto; margin-right:auto;
should look like that
#increment-btn {
background: red;
color: white;
font-size: 40px;
display: flex;
justify-content: center;
margin-left: auto;
margin-right: auto;
}
For your problem you need to read this article:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You should add
margin: auto;
display: block;
to #increment-btn style.
Other solution is to add a div parent element to the button and add flex style there:
display: flex;
justify-content: center;
I made a codepen for you: https://codepen.io/kovtib/pen/vYjgXrP
h1 {
margin-top: 10px;
margin-bottom: 10px;
display: flex;
justify-content: center;
}
#count-el {
font-size: 50px;
display: flex;
justify-content: center;
}
#increment-btn {
background: red;
color: white;
font-size: 40px;
display: flex;
justify-content: center;
margin-inline: auto;
}
<h1>People entered:</h1>
<h2 id="count-el">0</h2>
<button id="increment-btn">Increment</button>
Add margin-inline: auto to your button styles.
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 1 year ago.
I have div with h3 and button inside of it, and my div has display:flex; with justify-content:center; align-items:center; and when i insert these propeties, my button sticks on the right side of the h3 i tried creating div and putting button in it, but that just breakes the view
So question is, how do i put button under h3? Do i have missing flex properties?
.tittle-block {
display: flex;
justify-content: center;
align-items: center;
background: url(../img/background.png) 0% no-repeat;
padding: 0;
min-height: 495px;
}
.tittle {
text-align: center;
width: 555px;
color: #fff;
font-size: 42px;
margin: 0;
}
.button {
display: flex;
justify-content: center;
align-items: center;
flex-direction: wrap;
border: 1px solid white;
border-radius: 5px;
background: none;
color: #fff;
font-size: 25px;
}
<div class="tittle-block">
<h3 class="tittle">Text here</h3>
<button type="button" class="button">View more</button>
</div>
All you need to do is add flex-direction: column.
But, first, you've a syntax error:
<div class="tittle-block> , you need to close the class tag, like this <div class="tittle-block">
.tittle-block{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: url(../img/background.png) 0% no-repeat;
padding: 0;
min-height: 495px;
}
.tittle{
text-align: center;
width: 555px;
color: #000;
font-size: 42px;
margin: 0;
}
.button{
display: flex;
justify-content: center;
align-items: center;
flex-direction: wrap;
border: 1px solid white;
border-radius: 5px;
background: none;
color: #000;
font-size: 25px;
}
<div class="tittle-block">
<h3 class="tittle">Text here</h3>
<button type="button" class="button">View more</button>
</div>
ps: I edited the font to be #000 so that you can see it, change it back to your original #fff.
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 1 year ago.
I have 3 elements in a div, I want them to be in a block (vertical) and be aligned horizontally and vertically. Here is how it looks right now:
Here is my code:
<div className="parent">
<p className="heading">TITLE</p>
<p className="description"><strong>DISCLAIMER</strong>: The site contains offensive, vulgar langauge which may not be<br/>suitable for many, so enter with caution and do not reveal any personal details</p>
<Link to="/school"><button className="enterButton">enter the website</button></Link>
</div>
----------------------
stylesheet.css
----------------------
.parent {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.heading {
font-size: 76px;
text-align: center;
}
.description {
font-size: 18px;
opacity: .7;
text-align: center;
line-height: 26px;
}
.enterButton {
width: 360px;
height: 100px;
background-color: #E1E8ED;
color: #15202B;
font-size: 32px;
font-weight: bolder;
text-align: center;
border: none
}
I want them align and below each other like:
TITLE
Disclaimer
Enter the website
Flex-direction column to set up the alignment of your elements within the flex parent element. You already have the center alignment both axis with align-items: center and justify-content: center.
.parent {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
Will do the trick...
This question already has an answer here:
Text not centered with justify-content: center
(1 answer)
Closed 1 year ago.
I'm trying to make an array of "buttons" with links.
It works fine when the text is only one line, but if the text wraps to two lines, the lines get left justified.
I'd rather have both lines centered.
.brand-wrap {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 500px;
height: 100%;
font-family: Montserrat, verdana, sans-serif;
}
.brand {
font-size: 14px;
width: 31%;
height: 50px;
background-color: #eee;
border: solid 3px white;
display: flex;
justify-content: center;
align-items: center;
}
.brand A {
text-decoration: none;
color: #6f6f6f;
line-height: normal;
}
a {
outline: none;
border: none;
}
<div class="brand-wrap">
<div class="brand">Short</div>
<div class="brand">words</div>
<div class="brand">gets centered</div>
<div class="brand">Both horizontally</div>
<div class="brand">and vertically</div>
<div class="brand">But long sentences get left-justified</div>
</div>
Try this:
.brand-wrap {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 500px;
height: 100%;
font-family: Montserrat, verdana, sans-serif;
}
.brand {
font-size: 14px;
width: 31%;
height: 50px;
background-color: #eee;
border: solid 3px white;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.brand A {
text-decoration: none;
color: #6f6f6f;
line-height: normal;
}
a {
outline: none;
border: none;
}
<div class="brand-wrap">
<div class="brand">Short</div>
<div class="brand">words</div>
<div class="brand">gets centered</div>
<div class="brand">Both horizontally</div>
<div class="brand">and vertically</div>
<div class="brand">But long sentences <b>DON'T</b> get left-justified</div>
</div>
The problem with your code was that because it overflowed, the container expanded to the maximum possible width, making it appear as if the text wasn't center-aligned. Adding a text-align:center fixes that problem.
You can try adding justify-content: center; or align-items: center;
on your flexbox container!