This question already has answers here:
How to vertically align text inside a flexbox?
(13 answers)
Closed 1 year ago.
I'm trying to remake the google search website for fun and I need to vertically center all the text in the footer.
code and how it looks like:
https://html-css-js.com/?html=%3C!DOCTYPE%20html%3E%0A%3Chtml%20lang=%22en%22%3E%0A%20%20%3Chead%3E%0A%20%20%20%20%3Cmeta%20charset=%22UTF-8%22%20/%3E%0A%20%20%20%20%3Cmeta%20http-equiv=%22X-UA-Compatible%22%20content=%22IE=edge%22%20/%3E%0A%20%20%20%20%3Cmeta%20name=%22viewport%22%20content=%22wi$*$dth=device-wi$*$dth,%20initial-scale=1.0%22%20/%3E%0A%20%20%20%20%3Clink%20rel=%22stylesheet%22%20href=%22styles.css%22%20/%3E%0A%20%20%20%20%3Clink%0A%20%20%20%20%20%20rel=%22stylesheet%22%0A%20%20%20%20%20%20href=%22https://fonts.googleapis.com/icon?family=Material%20Icons%22%0A%20%20%20%20/%3E%0A%20%20%20%20%3Ctitle%3EGoogle%3C/title%3E%0A%20%20%3C/head%3E%0A%20%20%3Cbutton%20type=%22button%22%20class=%22btn%20btn-light%22%3EGoogle%20Search%3C/button%3E%0A%20%20%3Cbutton%20type=%22button%22%20class=%22dark%20btn-light%22%3EI'm%20Feeling%20Lucky%3C/button%3E%0A%20%20%20%20%3Cul%3E%0A%20%20%20%20%20%20%3Cli%20class=%22right%20button%22%3E%3Ca%20href=%22#%22%3ESign%20In%3C/a%3E%3C/li%3E%0A%20%20%20%20%20%20%3Cli%20class=%22right%20icon%22%3E%0A%20%20%20%20%20%20%20%20%3Cspan%20class=%22material-icons%20navigation%20icon%22%3Eapps%3C/span%3E%0A%20%20%20%20%20%20%3C/li%3E%0A%20%20%20%20%20%20%3Cli%20class=%22right%22%3E%3Ca%20href=%22#%22%3EImages%3C/a%3E%3C/li%3E%0A%20%20%20%20%20%20%3Cli%20class=%22right%22%3E%3Ca%20href=%22#%22%3EGmail%3C/a%3E%3C/li%3E%0A%20%20%20%20%3C/ul%3E%0A%20%20%3Cdiv%3E%0A%20%20%20%20%3Cimg%20src=%22images/google_logo.png%22%20class=%22googleLogo%22%20/%3E%0A%20%20%3C/div%3E%0A%20%20%3Cinput%20type=%22text%22%3E%0A%20%20%3Cspan%20class=%22material-icons%20search%22%20style=%22font-size:%201.5em;%22%3Esearch%3C/span%3E%0A%20%20%3Cspan%20class=%22material-icons%20mic%22%20style=%22font-size:%202rem;%22%3Emic%3C/span%3E%0A%20%20%0A%20%20%3Cdiv%20class=%22topfooter%22%3E%0A%20%20%20%20United%20Kingdom%0A%20%20%3C/div%3E%0A%20%20%3Cfooter%3E%0A%20%20%20%20%3Cul%20class=%22footer%22%3E%0A%20%20%20%20%20%20%3Cli%3E%3Ca%20href=%22#%22%3ESettings%3C/a%3E%3C/li%3E%0A%20%20%20%20%20%20%3Cli%3E%3Ca%20href=%22#%22%3ETerms%3C/a%3E%3C/li%3E%0A%20%20%20%20%20%20%3Cli%3E%3Ca%20href=%22#%22%3EPrivacy%3C/a%3E%3C/li%3E%0A%20%20%20%20%20%20%3Cli%3E%3Ca%20href=%22#%22%3EHow%20Search%20works%3C/a%3E%3C/li%3E%0A%20%20%20%20%20%20%3Cli%3E%3Ca%20href=%22#%22%3EBusiness%3C/a%3E%3C/li%3E%0A%20%20%20%20%20%20%3Cli%3E%3Ca%20href=%22#%22%3EAdvertising%3C/a%3E%3C/li%3E%0A%20%20%20%20%20%20%3Cli%3E%3Ca%20href=%22#%22%3EAbout%3C/a%3E%3C/li%3E%0A%20%20%20%20%3C/ul%3E%0A%20%20%3C/footer%3E%0A%0A%20%20%3C/body%3E%0A%3C/html%3E%0A&css=*%20%7B%0A%20%20margin:%200;%0A%20%20padding:%200;%0A%20%20font-size:%2010px;%0A%20%20font-family:%20arial,%20sans-serif;%0A%7D%0A%0Ali%20%7B%0A%20%20float:%20right;%0A%20%20list-style-type:%20none;%0A%20%20margin-top:%2020px;%0A%7D%0A%0Aa%20%7B%0A%20%20text-decoration:%20none;%0A%20%20color:%20black;%0A%7D%0A%0A.left%20%7B%0A%20%20float:%20left;%0A%7D%0A%0A.left%20a%20%7B%0A%20%20margin-left:%2020px;%0A%7D%0A%0A.right%20%7B%0A%20%20margin-right:%2020px;%0A%7D%0A%0A.button%20%7B%0A%20%20background-color:%20#4485f4;%0A%20%20padding:%207px;%0A%20%20border-radius:%205%25;%0A%7D%0A%0A.button%20a%20%7B%0A%20%20color:%20#fff;%0A%7D%0A%0A.icon%20%7B%0A%20%20color:%20grey;%0A%7D%0A%0Aa%20%7B%0A%20%20justify-items:%20center;%0A%7D%0A.button%20%7B%0A%20%20margin-top:%2015px;%0A%7D%0A.icon%20%7B%0A%20%20margin-top:%207.5px;%0A%7D%0A%0Aimg%20%7B%0A%20%20position:%20absolute;%0A%20%20wi$*$dth:%20217px;%0A%20%20top:%2032%25;%0A%20%20left:%2050%25;%0A%20%20transform:%20translate(-50%25,%20-50%25);%0A%7D%0A%0Ainput%20%7B%0A%20%20position:%20absolute;%0A%20%20wi$*$dth:%20460px;%0A%20%20height:%2034px;%0A%20%20top:%2039%25;%0A%20%20left:%2050%25;%0A%20%20transform:%20translate(-50%25,%20-50%25);%0A%20%20border-radius:%2020px;%0A%20%20margin-top:%2019px;%0A%20%20border:%200.1px%20soli$*$d%20rgba(209,%20209,%20209,%200.658);%0A%20%20outline:%20none;%0A%20%20text-indent:%2040px;%0A%20%20font-size:%2013px;%0A%7D%0A%0A.search%20%7B%0A%20%20position:%20absolute;%0A%20%20top:%2041.6%25;%0A%20%20left:%2035.5%25;%0A%20%20transform:%20translate(-50%25,%20-50%25);%0A%20%20color:%20rgba(124,%20124,%20124,%200.658);%0A%7D%0A%0A.mic%20%7B%0A%20%20position:%20absolute;%0A%20%20top:%2041.6%25;%0A%20%20left:%2064.5%25;%0A%20%20transform:%20translate(-50%25,%20-50%25);%0A%20%20color:%20rgba(124,%20124,%20124,%200.658);%0A%7D%0A%0A.btn%20%7B%0A%20%20padding:%208px%2010px;%0A%20%20position:%20absolute;%0A%20%20top:%2049%25;%0A%20%20left:%2045.8%25;%0A%20%20transform:%20translate(-50%25,%20-50%25);%0A%20%20outline:%20none;%0A%20%20border:%201px%20soli$*$d%20#f8f9fa;%0A%20%20color:%20#3c4043;%0A%20%20background-color:%20#f8f9fa;%0A%20%20font-size:%2011.5px;%0A%7D%0A%0A.dark%20%7B%0A%20%20padding:%208px%2010px;%0A%20%20position:%20absolute;%0A%20%20top:%2049%25;%0A%20%20left:%2054.2%25;%0A%20%20transform:%20translate(-50%25,%20-50%25);%0A%20%20outline:%20none;%0A%20%20border:%201px%20soli$*$d%20#f8f9fa;%0A%20%20color:%20#3c4043;%0A%20%20background-color:%20#f8f9fa;%0A%20%20font-size:%2011.5px;%0A%7D%0A%0Afooter%20%7B%0A%20%20display:%20flex;%0A%20%20flex-direction:%20row;%0A%20%20position:%20fixed;%0A%20%20left:%200;%0A%20%20bottom:%200;%0A%20%20wi$*$dth:%20100%25;%0A%20%20height:%2040px;%0A%20%20background-color:%20whitesmoke;%0A%7D%0A%0A.footer%20li%20a%20%7B%0A%20%20color:%20#70757a;%0A%7D%0A%0A.topfooter%20%7B%0A%20%20position:%20fixed;%0A%20%20wi$*$dth:%20100%25;%0A%20%20left:%200;%0A%20%20bottom:%2041px;%0A%20%20background-color:%20whitesmoke;%0A%20%20padding:%2015px%2030px;%0A%20%20border-bottom:%201px%20soli$*$d%20#dadce0;%0A%20%20color:%20#70757a;%0A%20%20font-size:%2013px;%0A%7D%0A&js=
Here is how to center text, or any element using flexbox:
First declare display: flex. Now:
justify-content: center will center children horizontally
place-items: center will center children vertically.
div {
width: 100%;
height: 100px;
background: #ccc;
display: flex;
justify-content: center;
place-items: center;
}
<div>
This is centered
</div>
Related
This question already has answers here:
How can I horizontally center an element?
(133 answers)
How to center a "position: absolute" element
(31 answers)
How can I center an absolutely positioned element in a div?
(37 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed last year.
I'm trying to center a button on my website, so I tried left : 50% to get it to the middle of the screen, but for some reason it brings it all the way to the right side of the screen. Here's the code:
#ContactButton {
font-size: 20px;
border: none;
width : 120px;
position : relative;
height: 30px;
font-weight: 500;
border-radius: 30px;
left : 50%;
}
There are many ways. On the button itself, you can just use margin: 0 auto;.
Or you could maybe just use text-align: center on the button's container.
Or, for example, you could use flexbox on the buttons container:
.container{
display: flex;
justify-content: center;
}
And there are several other possibilities. Check the link #cloned gave you on his comment.
This question already has answers here:
How do I vertically align text in a div?
(34 answers)
Closed 2 years ago.
I want to create a square box using CSS of given size. Then add a paragraph of text inside the square and then center the text horizontally in square.
Here is my code:
#myid {
width: 100px;
height: 100px;
text-align: center;
vertical-align: middle;
}
#myid:after {
content: 'hello';
}
<div id="myid" />
The issue is I am able to get the square with text hello centered horizontally but not in the middle of the square.
How to fix this issue?
The easiest method by far is to use Flexbox. Simple make #myid a flex container and center its items:
#myid {
/* ... */
display: flex;
justify-content: center; /* Horizontally centers */
align-items: center; /* Vertically centers */
}
In addition, you can now remove text-align: center and vertical-align: center.
JSFiddle example: https://jsfiddle.net/Lg3u0z4d/.
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Vertically align text next to an image?
(26 answers)
Flexbox: center horizontally and vertically
(14 answers)
How do I vertically align text in a div?
(34 answers)
Vertically centering a div inside another div [duplicate]
(24 answers)
Closed 4 years ago.
I am trying to center align a span inside a div, which also contains an img element.
.element {
display: inline-block;
}
.element img {
height: 40px;
width: 40px;
border-radius: 50%;
margin-right: 20px;
}
.element span {
display: inline-block;
}
<div class="element">
<img src="https://images.pexels.com/photos/35646/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<span>hello</span>
</div>
or see this fiddle
However the text wont vertical align. I have looked primary at this question. However vertical-align: middle does nothing here.
I also looked at this question. However I will rather avoid anything position: relative & position: absolute workarounds for this. I also tried messing the line-height with no luck.
I even tried to set height: 100%on the span, as this question suggests, but that does nothing either.
I basically looked at bunch of questions here on SO, it seems like css is so weird about this, that there basically is 12 approaches for a simple thing like this. Yet I can't seem to get 1 of them to work in my occasion.
What is up with this behavior?
EDIT:
Marked as duplicate to How to Vertical align elements in a div? - I have explained that these solutions with line-height and vertical align doesn't work in my case as explained in the original question. The accepted solution did not work in this case. How is it a duplicate?
The answer here is probably to use flexbox. If your flex-direction is row (which is default), you can use align-items to center the elements vertically and justify-content to justify the row to the left (the "start" of the flex container). Let me know if you have any questions!
.element {
align-items: center;
display: flex;
justify-content: flex-start;
}
.element img {
height: 40px;
width: 40px;
border-radius: 50%;
margin-right: 20px;
}
.element span {
display: inline-block;
}
<div class="element">
<img src="https://images.pexels.com/photos/35646/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<span>hello</span>
</div>
Use flexbox for this. Sample:
.element {
display: flex;
align-items: center;
}
Use align-items: center for vertical align and justify-content: center; if you need also horizontal align center.
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Flexbox: center horizontally and vertically
(14 answers)
How do I vertically center text with CSS? [duplicate]
(37 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 4 years ago.
I am trying to do something I think is pretty easy but clearly making a pigs ears of it. Here is my fiddle
I have a button and a label on display. I want to centre the label in the middle of the div, so horizontally and vertically centred.
I can centre it horizontally but not vertically. So I have tried a few things but nothing seems to centre the label vertically, even the vertical-align I use below. Not really sure why though?
.headerLbl {
text-align: center;
font-weight: bold;
color: white;
font-size: 14pt;
display: block;
vertical-align: central;
}
You need to add following styles into your code:
.menu {
background-color: #9FACEC; /* Medium blue */
position: fixed;
width: 100%;
margin: 0;
z-index: 1;
display:flex;
justify-content: center;
}
.headerLbl {
align-self: center;
width: 90%;
text-align: center;
}
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
How can I vertically align elements in a div?
(28 answers)
How do I vertically center text with CSS? [duplicate]
(37 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 4 years ago.
Thats not a div I want I just cant get to post it because it does not meet some requirement. I have never used anything like that before, just need help for a college project that requires programming.
I have this: enter image description here
I just want the text to be centered.
jsfiddle .net /etr1ok47/#&togetherjs=VfasppUOxh
using flex in this-p class:
display: flex;
flex-direction: column;
justify-content: center;
Try applying the following to your containing div (.parent) and the wrapper around your text (.child).
.parent {
height: 300px;
line-height: 300px;
text-align: center;
}
.child {
line-height: normal;
display: inline-block;
vertical-align: middle;
}
You can add padding to the top of your p element in css if you are needing the words in the circle to be vertically better centered.
p.this-p{
vertical-align: middle;
}
If the problem is the p itself not centering in the li element then define the parent with display: table and the element itself with vertical-align: middle and display: table-cell
p.this-p{ vertical-align: middle; align: center}
Above is when you use p element with padding. Same is applicable for other element