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:
Asked
Active
Viewed 43 times
;%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=){kind=link}
1 Answers
-1
Here is how to center text, or any element using flexbox:
- First declare
display: flex. Now: justify-content: centerwill center children horizontallyplace-items: centerwill center children vertically.
div {
width: 100%;
height: 100px;
background: #ccc;
display: flex;
justify-content: center;
place-items: center;
}<div>
This is centered
</div>
Krokodil
- 1,165
- 5
- 19
-
This didn't work for me. – I-Am-Coding Jun 21 '21 at 00:23
-
Could you show me a screenshot please – Krokodil Jun 21 '21 at 00:59