This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
How can I horizontally center an element?
(133 answers)
How to align text below an image in CSS?
(7 answers)
Closed last year.
struggling to centre my icon above the text, the height of the icon is fine but it should sit like so:
tried using flex but couldn't find the correct solution.
.container {
display: block;
width: 400px;
height: 100px;
border: 2px solid black;
}
.icon {
width: 30px;
height: 30px;
background-color: red;
}
.text {
text-align: center;
}
<div class="container">
<div class="icon"></div>
<p class="text">We couldn't find any matches to your search. <br></br>Please try again.</p>
</div>
You can use CSS flexbox: but remember that the default direction is row. If you switch it to flex-direction: column, then you will achieve what you want:
.container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 400px;
height: 100px;
border: 2px solid black;
}
.icon {
width: 30px;
height: 30px;
background-color: red;
}
.text {
text-align: center;
}
<div class="container">
<div class="icon"></div>
<p class="text">We couldn't find any matches to your search. <br />Please try again.</p>
</div>
Related
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
How do I vertically center text with CSS? [duplicate]
(37 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 3 years ago.
I am looking for some direction or best practice with working with text. I am trying to build a bubble that holds a image and then a name in a small area. I would like the text to be centered. what strategy would you use? I seem to always have issues when working with text
body {
background: black;
}
.oval {
width: 150px;
height: 50px;
border: 2px solid white;
border-radius: 500px;
color: white;
margin-top: 200px;
display: flex;
align-items: center;
}
.oval>#us_flag {
background: url('https://res.cloudinary.com/mikebeers/image/upload/v1552151059/us_zsvoel.png');
background-size: cover;
background-position: center center;
height: 100%;
width: 100%;
overflow: hidden;
border-top-left-radius: 500px;
border-bottom-left-radius: 500px;
/* border: 2px solid red; */
max-height: 50px;
}
.oval>#text {
border: 2px solid red;
font-size: .9em;
line-height: 2em;
padding: 0;
display: flex;
align-content: center;
height: 100%;
}
#text>p {
/* border: 1px solid green; */
word-break: keep-all;
padding: 0;
}
<div class="container-fluid">
<div class="row oval">
<div class="col-4" id="us_flag">
</div>
<div class="col-8" id='text'>
<p>United States</p>
</div>
</div>
</div>
If you want to center your text vertically and horizontally in a box, you can use flexbox. Add these styles to your box
display: flex;
justify-content: center;
align-items: center;
If you want to learn more about flexbox, there is a good guide for it: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 3 years ago.
I need to put button under button, with display flex.
When I remove display: flex the button goes up the page, but when I use display: flex the buttons are centered but they are side by side.
#wrapper {
width: 100%;
height: 400px;
border: 1px solid black;
display: flex;
align-items: center;
justify-content: center;
}
button {
height: 20px;
width: 100px;
}
<div id="wrapper">
<button type="button">hello</button>
<button type="button">hello</button>
</div>
You can use flex-direction: column. This will stack the flex items vertically (from top to bottom)
#wrapper {
width: 100%;
height: 400px;
border: 1px solid black;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
button {
height: 20px;
width: 100px;
}
<div id="wrapper">
<button type="button">hello</button>
<button type="button">hello</button>
</div>
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 4 years ago.
I want to center my content both vertically and horizontally in the page. I couldn't seem to get it working. Anyone here can help?
Thanks.
<style type = "text/css">
#loginMenu {
border:5px solid green;
padding:10px 10px 10px 10px;
background-color:#FF9;
display: table;
position: absolute;
text-align:center;
height: 200px;
width: 400px;
}
.centrediv
{
margin: auto;
vertical-align:middle;
}
</style>
<div id="loginMenu"></div>
Flexbox does this the best. Example:
<div class="Aligner">
<div class="Aligner-item">…</div>
</div>
.Aligner {
display: flex;
align-items: center;
justify-content: center;
}
.Aligner-item {
max-width:50%;
}
You should use flexbox as it serves your need with ease. Have a look of the snippet:
<!-- HTML -->
<body>
<div></div>
</body>
<!-- CSS -->
body{
display: flex;
vertical-align: middle;
height: 100vh;
width: 100%;
justify-content: center;
align-items: center;
box-sizing: border-box;
margin: 0px;
}
div{
height: 100px;
width: 100px;
background-color: #f00;
margin-top: -50px;
}
Based on a page from W3Schools
.centrediv
{
padding: 100px 0;
text-align: center;
}
This question already has answers here:
How do I vertically center text with CSS? [duplicate]
(37 answers)
How can I vertically align elements in a div?
(28 answers)
How to align a <div> to the middle (horizontally/width) of the page [duplicate]
(27 answers)
How to vertical align an inline-block in a line of text?
(2 answers)
Closed 4 years ago.
I have a button a div and a span adjacent to each other in a line
I need all of them to appear vertically aligned to the center like this
below is my code
button{
height: 50px;
}
div{
display: inline-block;
height: 70px;
border: 2px solid black;
padding: 10px;
}
h1{
display: inline-block;
}
<div></div>
<button>Button</button>
<span>Span</span>
<div>div</div>
I would suggest using flex for in this instance.
If you wrap a container around your elements, you can align the child elements to the center. See the snippet for an example.
button{
height: 50px;
}
.container div{
display: inline-block;
height: 70px;
border: 2px solid black;
padding: 10px;
}
h1{
display: inline-block;
}
.container {
display:flex;
align-items:center;
}
<div class="container"><div></div>
<button>Button</button>
<span>Span</span>
<div>div</div>
</div>
I hope this helps.
If you introduce a parent element you can use flexbox:
.wrapper {
display: flex;
align-items: center; /* vertical center */
justify-content: center; /* horizontal center */
border: 1px solid red;
}
button {
height: 50px;
}
.wrapper>div {
display: inline-block;
height: 70px;
border: 2px solid black;
padding: 10px;
}
h1 {
display: inline-block;
}
<div class="wrapper">
<div></div>
<button>Button</button>
<span>Span</span>
<div>div</div>
</div>
This question already has answers here:
Center and bottom-align flex items
(3 answers)
Closed 5 years ago.
How to align a div vertically to middle and another div vertically to bottom inside a flex column?
Expected result:
.container {
border: 1px solid black;
height: 200px;
width: 50px;
display: flex;
flex-direction: column;
justify-content: center;
}
.first-item {
margin-top: auto;
margin-bottom: auto;
}
<div class="container">
<div class="first-item">First</div>
<div class="second-item">Second</div>
</div>
That should do it. Then the second item should be pushed to the bottom while the first item stays in the middle. A pure flexbox solution not using absolute positioning.
You have to use the line-height property with the same height value
.parent{
display: table;
position: relative;
border: 1px solid;
height: 150px;
line-height: 150px;
}
.parent div{
position: absolute;
bottom: 0;
line-height: 20px;
}
<div class="parent">
test
<div>test</div>
</div>
Take a look at this.
.parent{
display: flex;
height: 150px;
width: 50px;
border: 1px solid black;
align-items: center;
justify-content: center;
}
.two{
align-self: flex-end;
position: absolute;
}
<div class="parent">
<div>test</div>
<div class="two">test</div>
</div>