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
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:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 1 year ago.
CSS
.as {
width: 300px;
height: 300px;
border: 5px solid red;
position: absolute;
left: 25%;
display: flex;
flex-direction: column;
}
.ab {
width: 60px;
height: 60px;
border: 2px solid green;
background-color: green;
}
.cd {
width: 60px;
height: 60px;
border: 2px solid blue;
background-color: blue;
}
HTML
$div class="as"$
$div class="ab"$123$/div$
$div class="cd"$123$/div$
$/div$
When I run it, I have green and blue boxes in a big red box. The green and blue are on the left corner.
since the parent container, which is "as" has display: flex and flex-direction: column
I can't go to the left bottom corner.
Is there a way to go to the left bottom? besides make it position: relative and bottom: %.
Thank you
Hi, I am practicing CSS
Do you need use property the justify-content with value flex-end to the left bottom corner
Look this example bellow
.as {
width: 300px;
height: 300px;
border: 5px solid red;
display: flex;
flex-direction: column;
margin-bottom: 1rem;
}
.bottom-left {
justify-content: flex-end;
}
.bottom-right {
align-items: flex-end;
justify-content: flex-end;
}
.ab {
width: 60px;
height: 60px;
border: 2px solid green;
background-color: green;
}
.cd {
width: 60px;
height: 60px;
border: 2px solid blue;
background-color: blue;
}
<p>Bottom left</p>
<div class="as bottom-left">
<div class="ab">123</div>
<div class="cd">123</div>
</div>
<p>Bottom right</p>
<div class="as bottom-right">
<div class="ab">123</div>
<div class="cd">123</div>
</div>
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 2 years ago.
I have a flexbox container with 3 flex items
the text of the two outer items should be at the center point of each item
so far the text appears on the top of
using align-items: center;
recommended in How to vertically align text inside a flexbox?
on the container just squished the divs to one line, ignoring the heigth of the container.
how to center the text at the center of each div ?
body {
margin: 0;
}
.file_upload-container {
display: flex;
margin: 20px;
height: 200px;
/*align-items: center;*/
justify-content: center;
}
.drop-zone_main {
color: #cccccc;
border: 4px dashed #009578;
border-radius: 10px;
}
.upload_spacer {
background-color: #00ffb7;
flex-basis: 200px;
}
.drop-zone_second {
color: #cccccc;
border: 4px dashed #009578;
border-radius: 10px;
flex-basis: 300px;
}
input {
display: none;
}
<div class="file_upload-container">
<div class="drop-zone_main">Drop MainFile here or click to upload</div>
<input class="input_main" type="file" name="upload_mainfile">
<div class="upload_spacer"></div>
<div class="drop-zone_second">Drop second file here or click to upload</div>
<input class="input_second" type="file" name="upload_secondfile">
</div>
You can wrap your input in a div, so it gets aligned with its siblings, and use display: flex to align the inner content:
body {
margin: 0;
}
.file_upload-container {
display: flex;
margin: 20px;
height: 200px;
/*align-items: center;*/
justify-content: center;
}
.drop-zone_main {
color: #cccccc;
border: 4px dashed #009578;
border-radius: 10px;
}
.upload_spacer {
background-color: #00ffb7;
flex-basis: 200px;
}
.drop-zone_second {
color: #cccccc;
border: 4px dashed #009578;
border-radius: 10px;
flex-basis: 300px;
}
.input-wrap {
display: flex;
align-items: center;
}
<div class="file_upload-container">
<div class="drop-zone_main">Drop MainFile here or click to upload</div>
<div class="input-wrap">
<input class="input_main" type="file" name="upload_mainfile">
</div>
<div class="upload_spacer"></div>
<div class="drop-zone_second">Drop second file here or click to upload</div>
<div class="input-wrap">
<input class="input_second" type="file" name="upload_secondfile">
</div>
</div>
You need to correct the css rules :
.drop-zone_main {
color: #cccccc;
border: 4px dashed #009578;
border-radius: 10px;
justify-content: center;
align-items: center;
display: flex;
}
.drop-zone_second {
color: #cccccc;
border: 4px dashed #009578;
border-radius: 10px;
flex-basis: 300px;
justify-content: center;
align-items: center;
display: flex;
}
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:
How do I vertically center text with CSS? [duplicate]
(37 answers)
Closed 5 years ago.
I've been working on getting the text in my content div centered vertically and I'm stumped. The container includes 1 div with a title and 1 div with content.
I've tried elements such as:
vertical-align: middle;
and also playing with the displays/positioning, but I'm not having any luck.
The current CSS is the following:
.content-wrapper {
height: 100vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: left;
text-align: left;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
color: #000;
font-family: Montserrat;
text-transform: none;
-webkit-transform: translateY(40vh);
transform: translateY(40vh);
will-change: transform;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: all 1.7s cubic-bezier(0.22, 0.44, 0, 1);
transition: all 1.7s cubic-bezier(0.22, 0.44, 0, 1);
padding-top: 10%;
padding-right: 25px;
padding-left: 30px;
float: right;
width: 35%;
background-color: #f0f7fc;
}
Flexbox
Flexbox allows you to vertically align the text without having a div with a fixed height. It is now supported by all the modern browsers.
Check my other answer to see all the problems and workarounds for Flexbox. The majority are for Internet Explorer.
display: flex;
align-items: center;
div {
width: 50px;
height: 100px;
display: flex;
align-items: center;
border: 1px solid black;
}
<div>
Test
</div>
line-height
If you know the height of the external div, you can use line-height.
height: 100px;
line-height: 100px; /* same value as height */
div {
width: 50px;
height: 100px;
line-height: 100px;
border: 1px solid black;
}
<div>
Test
</div>
display: table-cell
display: table-cell is another good alternative which allows you to vertically align without knowing the height of the div. It works in older browsers too (except Internet Explorer 7).
display: table-cell;
vertical-align: middle;
div {
width: 50px;
height: 100px;
display: table-cell;
vertical-align: middle;
border: 1px solid black;
}
<div>
Test
</div>