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/
Related
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>
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)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
How to vertically align an image inside a div
(37 answers)
Closed 3 years ago.
I have already centered the div in the page using Flex and now I want to center the image in the div.
I feel like I am using to many properties in my original centering and do not know if I am doing it correctly.
https://jsfiddle.net/fLkz49nj/
#auth_top{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 100vh;
}
#auth{
width: 250px;
height: 185px;
background: rgba(255,255,200,0.5);
box-shadow: 0px 1px 3px rgba(25, 25, 25, 0.4);
}
#auth_google_link{
width: 64px;
height: 64px;
display: block;
}
#auth_google_img{
width: 64px;
border: 1px solid white;
border-radius: 2px;
}
#auth_google_img:hover{
border: 1px solid black;
}
You can put #auth inside the flexbox and center it.
#auth_top{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 100vh;
}
#auth{
width: 250px;
height: 185px;
background: rgba(255,255,200,0.5);
box-shadow: 0px 1px 3px rgba(25, 25, 25, 0.4);
display: flex; /* added style from here */
justify-content: center;
align-items: center;
}
#auth_google_link{
width: 64px;
height: 64px;
display: block;
}
#auth_google_img{
width: 64px;
border: 1px solid white;
border-radius: 2px;
}
#auth_google_img:hover{
border: 1px solid black;
}
<div id='auth_top'>
<div id='auth'>
<a id='auth_google_link' href="/auth/google">
<img id='auth_google_img' src='data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRw%0D%0AOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNDggNDgiPjxkZWZzPjxwYXRo%0D%0AIGlkPSJhIiBkPSJNNDQuNSAyMEgyNHY4LjVoMTEuOEMzNC43IDMzLjkgMzAuMSAzNyAyNCAzN2Mt%0D%0ANy4yIDAtMTMtNS44LTEzLTEzczUuOC0xMyAxMy0xM2MzLjEgMCA1LjkgMS4xIDguMSAyLjlsNi40%0D%0ALTYuNEMzNC42IDQuMSAyOS42IDIgMjQgMiAxMS44IDIgMiAxMS44IDIgMjRzOS44IDIyIDIyIDIy%0D%0AYzExIDAgMjEtOCAyMS0yMiAwLTEuMy0uMi0yLjctLjUtNHoiLz48L2RlZnM+PGNsaXBQYXRoIGlk%0D%0APSJiIj48dXNlIHhsaW5rOmhyZWY9IiNhIiBvdmVyZmxvdz0idmlzaWJsZSIvPjwvY2xpcFBhdGg+%0D%0APHBhdGggY2xpcC1wYXRoPSJ1cmwoI2IpIiBmaWxsPSIjRkJCQzA1IiBkPSJNMCAzN1YxMWwxNyAx%0D%0AM3oiLz48cGF0aCBjbGlwLXBhdGg9InVybCgjYikiIGZpbGw9IiNFQTQzMzUiIGQ9Ik0wIDExbDE3%0D%0AIDEzIDctNi4xTDQ4IDE0VjBIMHoiLz48cGF0aCBjbGlwLXBhdGg9InVybCgjYikiIGZpbGw9IiMz%0D%0ANEE4NTMiIGQ9Ik0wIDM3bDMwLTIzIDcuOSAxTDQ4IDB2NDhIMHoiLz48cGF0aCBjbGlwLXBhdGg9%0D%0AInVybCgjYikiIGZpbGw9IiM0Mjg1RjQiIGQ9Ik00OCA0OEwxNyAyNGwtNC0zIDM1LTEweiIvPjwv%0D%0Ac3ZnPg=='/>
</a>
</div>
</div>
Hope it helps. Cheers!
you can do with positioning absolute but i guess that's not what you seek.
what you can do is
#auth{
text-align: center;
white-space: nowrap;
}
#auth:after {
content: '';
min-height: 100%;
display: inline-block;
vertical-align: middle;
}
#auth_google_link{
white-space: normal;
display: inline-block;
vertical-align: middle;
}
you should remove the display:block (to allow it to be centered) from the auth_google_link and then add a padding-top to the auth_google_img about the 22% (to move it down to the middle) and it should work perfectly
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>