This question already has answers here:
How do I vertically center text with CSS? [duplicate]
(37 answers)
Closed 4 years ago.
I am making a chrome extension for the first time and am trying to centre text. And the moment I am using text-align: centre; to horizontally align it but can't figure out how to vertically align so at the moment my text looks like this:
If anyone could help that would be great.
ex) display: table
div{
display: table;
width: 100px;
height: 50px;
background-color: #000;
}
div p{
display: table-cell;
text-align: center;
vertical-align: middle;
color: #fff;
}
<div>
<p>chatter</p>
</div>
ex) flex
div{
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 50px;
background-color: #000;
}
div p{
color: #fff;
}
<div>
<p>chatter</p>
</div>
ex) position
div{
position: relative;
width: 100px;
height: 50px;
background-color: #000;
text-align: center;
}
div p{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
color: #fff;
}
<div>
<p>chatter</p>
</div>
A really simple class I use for this is
.is-vertical-center {
display: flex;
align-items: center;
}
Hope this helps!
Related
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 12 months ago.
I know this is a generic question, but I looked everywhere and couldn't find anything, here's my code :
<a href='/Customers' class='centre'>Start</a>
I tried encasing this in a div tag too but couldn't get that to work. I also want a small grey box around it as a background.
my css code:
a {
width: 100%;
height: 250px;
display: inline-block;
}
.centre {
text-align: center;
display: inline-block;
font-size: 20px;
font-family: 'Roboto', sans-serif;
background-color: grey;
}
Use flex. Also, use from 4 code lines specified for aligned vertically:
*{
box-sizing: border-box;
}
body{
margin: 0;
}
div{
width: 100%;
height: 200px;
background-color: grey;
display: flex;
align-items: center;
justify-content: center;
position: absolute; /*here*/
top: 50%; /*here*/
transform: translateY(-50%); /*here*/
margin: 0; /*here*/
}
.centre {
text-align: center;
line-height: 150px; /*for aligning of text vertically in anchor tag*/
background-color: red;
width: 90%;
display: inline-block;
font-size: 20px;
font-family: 'Roboto', sans-serif;
text-decoration: none;
color: white;
}
<div>
<a href='/Customers' class='centre'>Start</a>
</div>
For more knowing about flex, see the first comment.
With your given code snippet you can do it like below.
Just change display: inline-block to display: flex and add those attirbutes:
justify-content: center;
align-items: center;
.linkContainer {
display: flex;
justify-content: center;
width: 100%;
}
.button {
border-radius: 5px;
text-align: center;
width: 75px;
padding: 5px 10px;
background-color: grey;
}
.button a {
color: white;
font-size: 20px;
font-family: 'Roboto', sans-serif;
text-decoration: none;
}
<div class="linkContainer">
<div class="button">Start</div>
</div>
I did edit this code. Your link is now a "button", so it might be easier for you to understand.
But I'd recommend you to learn a bit on your own: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
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 1 year ago.
I'm building this app where I want this title centered. I want it such that when I hover my mouse hover the text it increases the font and changes color. At first I chose to use <div> but since it occupies an entire line, the text would get highlighted when I would hover the mouse not necessarily over the text but on any point of the line. So then I decided to use <span>and ran into the problem stated.
So I have this:
.welcome {
border-width: 4px;
border-style: solid;
border-color: red;
border-radius: 50px;
position: fixed;
top: 50%;
left: 50%;
margin-top: -310px;
margin-left: -600px;
height: 600px;
width: 1200px;
}
.button {
color: green;
}
.button:hover {
transform: scale(1.2);
color: blue;
}
.title {
font-size: 120px;
/*
float: center;
align-content: center;
text-align: center;
*/
position: relative;
top: 35%;
}
<div class="welcome">
<span class="button title"> Mancala </span>
</div>
The part which is commented was my last try to center "Mancala", i.e., the span element.
I'm using two classes (button and title) because I will have multiple elements where I would them to highlight when hovered.
Thanks in advance for the help!
Upon debugging your code, here's a solution. Replace your CSS code with this. What I did is I used the flex property. Since .welcome had a width of 1200px and using the commands display: flex; and justify-content: center; all of the content which was in the .welcome div will get centered horizontally.
.welcome {
border-width: 4px;
border-style: solid;
border-color: red;
border-radius: 50px;
position: fixed;
top: 50%;
left: 50%;
margin-top: -310px;
margin-left: -600px;
height: 600px;
width: 1200px;
background: orange;
display: flex;
justify-content: center;
}
.button {
color: green;
}
.button:hover {
transform: scale(1.2);
color: blue;
}
.title {
font-size: 120px;
/*
float: center;
align-content: center;
text-align: center;
*/
position: relative;
text-align: center;
top: 35%;
}
<div class="welcome">
<span class="button title"> Mancala </span>
</div>
I thought this might work to use the div that uses welcome. Then, you can use text-align or use the flexbox to center your span tag inside the div.
Need to center this text in this way:
Basically, the top part to the left and the bottom part to the right, but with a bit of overlap.
How can I do that in HTML/CSS?
You can center the text vertically by using the centering with transform technique. Then the text should be separated into two lines and aligned to left/right plus a small negative margin so it overflows outside of the circle.
div {
height: 130px;
width: 130px;
background: lightblue;
position: relative;
border-radius: 50%;
}
p {
position: absolute;
top: 50%;
transform: translateY(-50%);
margin: 0;
width: 100%;
}
span {
display: block;
}
span:first-of-type {
text-align: left;
margin-left: -7px;
}
span:last-of-type {
text-align: right;
margin-right: -7px;
}
<div>
<p>
<span>La crèativitè</span>
<span>est contagieuse</span>
</p>
</div>
Simply use 2 elements for those 2 lines and add a margin-left to the second element:
.logo p {
margin: 0;
}
.logo p:nth-of-type(2) {
margin-left: 3.5em;
}
/* for demonstration purpose only */
html {
font-size: 40px;
font-family: Arial;
}
<div class="logo">
<p>La crèativitè</p>
<p>est contagieuse</p>
</div>
Another entirely different (and more complicated) approach is to use flex-box. It requires you to use containers and to know the principles of flex-box. But once you know what you're doing, it becomes fairly simple to center things inside of other things.
If you need somewhere to practice flex-box with simple games, you can visit https://flexboxfroggy.com/.
.container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: gray;
}
.logo {
width: 200px;
height: 200px;
background-color: maroon;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
p {
font-size: 20px;
}
#p1 {
align-self: flex-start;
}
#p2 {
align-self: flex-end;
}
<div class="container">
<div class="logo">
<p id="p1">La crèativitè</p>
<p id="p2"> est contagieuse</p>
</div>
</div>
Bonne Chance!
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 2 years ago.
I have tried everything and I still can't find a way to fix this "issue".
Here is my navbar:
Basically, I want the "pixelizer.io" to be centered, but the "log-in/register" prevents it from doing so.
If I make the text inside the button smaller, then "pixelizer.io" will be centered:
Here's the HTML:
<nav>
<h1>pixelizer.io</h1>
<button id="join-button">log-in/register</button>
</nav>
CSS (TITLE):
nav>h1 {
width: 100%;
clear: right;
display: inline;
margin: 0 auto;
font-size: 3em;
}
CSS (BUTTON):
#join-button {
float: right;
padding: 7px;
}
CODEPEN:
https://codepen.io/kibezin/pen/MWKvLGX
I gave the button absolute positioning then created a flex container for the <nav>
nav {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
nav > h1 {
text-align: center;
margin-left: auto;
margin-right: auto;
font-size: 3em;
}
#join-button {
position: absolute;
right: 5px;
padding: 7px;
}
<nav>
<h1>pixelizer.io</h1>
<button id="join-button">log-in/register</button>
</nav>
This'll do it:
nav {
position: relative;
text-align: center;
}
nav>h1 {
display: inline;
margin: 0 auto;
font-size: 3em;
}
#join-button {
padding: 7px;
position: absolute;
right: 0;
}
Making the button absolute positioned removes it from consideration for the layout of its siblings.
CodePen
I want to align the both vertically and horizontally, the height and width of the container will be fixed regarding other extenal factors.
How do i do that?
I've tried using flex
display: flex;
justify-content: center;
flex-direction: column;
but it gets rid of my horizontal alignment
Actually, there are multiple ways to achieve vertical alignment, here is one:
div {
width: 300px;
height: 150px;
background-color: #ddd;
text-align: center;
font-size: 0;
}
div::before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
a {
width: 100px;
height:50px;
background-color: #ff0000;
display: inline-block;
vertical-align: middle;
font-size: 16px
}
<div>
Some Text
</div>
Found the solution!
On the div parent:
position:relative;
On the a child:
position: absolute;
top: 50%;
left: 50%;
margin-left: -half_its_width;
margin-top: -half_his_height;