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.
Related
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
How can I vertically align elements in a div?
(28 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed last year.
I have 3 small divs contained in a larger div all inline. I want to make the middle div vertically centered because it is a dash in between two words. When the user hovers over them, the line expands for an animation so it is important that the divs have relative position so the last word can get "pushed"
<div id = "con">
<div class = "a">01</div>
<div id = test></div> //This is the line to be centered
<div class = "a">Projects</div>
</div>
.a {
display: inline-block;
color: #AAAAAA;
}
html {
background: #222222;
}
#test {
width: 30px;
height: 1px;
display: inline-block;
background-color: #AAAAAA;
border-radius: 1px;
}
#con {
position: relative;
}
display: inline-flex, and align-items: center on the container solves your problem.
To better learn how to use flexbox display, check out flexbox froggy.
.a {
color: #AAAAAA;
}
html {
background: #222222;
}
#test {
width: 30px;
height: 1px;
background-color: #AAAAAA;
border-radius: 1px;
}
#con {
position: relative;
display: inline-flex;
align-items: center;
}
<div id="con">
<div class="a">01</div>
<div id="test"></div>
<div class="a">Projects</div>
</div>
Can use from margin-bottom & transition:
.a {
display: inline-block;
color: #AAAAAA;
}
html {
background: #222222;
}
#test {
transition: 0.5s linear;
margin-bottom: 5px;
width: 30px;
height: 1px;
display: inline-block;
background-color: #AAAAAA;
border-radius: 1px;
}
#con {
position: relative;
display: inline-block;
}
#con:hover #test {
width: 40px;
}
<div id="con">
<div class="a">01</div>
<div id=test></div>
<div class="a">Projects</div>
</div>
I'm working on an alternate display for a presentation program that replaces an HTML div with the text of the slide.
I want to have the bottom of the text aligned to a certain point, so that it has the same bottom point regardless of the number of lines.
I have now put that div inside another (id="wrapper") in order to get it to align at the bottom. The screen will always be 1920x1080. I've used the following CSS:
#wrapper {
height: 1040px;
}
#currentslide {
display: inline-block;
background-color: rgba(0,0,0,0.8);
color: white;
text-align: center;
line-height: 1;
font-size: 32px;
padding: 10px;
vertical-align: bottom;
position: absolute;
left: 50%;
transform: translate(-50%);
}
<div id="currentslide"></div>
The inline-block is to give a background that changes with the text width, but I think it's interfering with my placement.
Thanks for any help!
Figured it out. I used:
#wrapper {
height: 1080px;
}
#currentslide {
display: inline-block;
background-color: rgba(0,0,0,0.8);
color: white;
text-align: center;
line-height: 1;
font-size: 32px;
padding: 10px;
position:absolute;
bottom: 40px;
left: 50%;
transform: translate(-50%);
}
This question already has answers here:
Why the content is not covered by the background of an overlapping element?
(8 answers)
Closed 3 years ago.
I have two divs with a background color, one overlapping the other. The problem is that I can see the content of the underlying div through the top div.
https://jsfiddle.net/jost_s/0dxwtbvn/23/
div {
background-color: lightblue;
width: 100px;
height: 100px;
font-size: 3rem;
display: flex;
align-items: center;
justify-content: center;
}
.overlapping {
margin-left: 50px;
margin-top: -50px;
border: 1px solid white;
}
<div>AB</div>
<div class="overlapping">CD</div>
Use position: relative
div {
background-color: lightblue;
width: 100px;
height: 100px;
font-size: 3rem;
display: flex;
align-items: center;
justify-content: center;
}
.overlapping {
margin-left: 50px;
margin-top: -50px;
border: 1px solid white;
position:relative;
}
<div>
AB
</div>
<div class="overlapping">
CD
</div>
Without a position property, they're not really overlapping in the context of the way the browser renders them.
There's probably a better explanation of why the second block overlaps the first block, but not it's content, but I'm sure it involves a deep understanding of how the rendering engine works. You might even get a different result in different browsers.
To get the desired effect, position the overlapping block instead of using the margin...
div {
background-color: lightblue;
width: 100px;
height: 100px;
font-size: 3rem;
display: flex;
align-items: center;
justify-content: center;
}
.overlapping {
position: relative;
top: -50px;
left: 50px;
border: 1px solid white;
}
<div>
AB
</div>
<div class="overlapping">
CD
</div>
I would use transform: translate(); to position the elements instead of margin.
Since its triggering the stacking context and assure that the elements are "stacket" in the right way.
I cannot really explain why margin behaves in this way but maybe someone wants to educate me.
div {
background-color: lightblue;
width: 100px;
height: 100px;
font-size: 3rem;
display: flex;
align-items: center;
justify-content: center;
}
.overlapping {
border: 1px solid white;
transform: translate(50px, -50px);
}
<div>
<p>
AB
</p>
</div>
<div class="overlapping">
<p>
CD
</p>
</div>
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!
I am trying to make it so that the button that I have centered on the screen (when the screen is full size, it is centered) stays in the center while still scaling down to fit to smaller screens.
I have tried some of the answers I found here and other places about changing position: absolute; and wrapping the button in a div with text-align: center; and margin: auto; but so far the button ends up not staying centered.
Here is what I have:
.wrapper {
text-align: center;
margin: auto;
}
#mybutton {
position: absolute;
left: 37%;
text-align: center;
cursor: pointer;
bottom: 10%;
letter-spacing: .55rem;
max-width: 50%;
background: #3498db;
background-image: linear-gradient(to bottom, #3498db, #2980b9);
text-shadow: 1px 1px 3px #666666;
font-family: Arial;
color: #ffffff;
font-size: 30px;
padding: 10px 20px 10px 20px;
text-decoration: none;
border-color: #3498db;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
This is probably something very simple that I am missing, but it's late and I am tired of messing around with this, so if anyone can offer any help, it would be appreciated!
Make it simple. You just need text-align:center with width.
CSS i have used
width:50%;margin:0 auto;text-align:center;
see here
try this , it is working .
.button1 {
text-align: center;
}
.button1 a {
background-color: #03326c;
font-size: 25px;
height: 35px;
position: relative;
text-align: center;
display: inline-block;
color: white;
padding: .5em 1em;
}
<div class="button1">
<span class="Button1">BUTTON</span>
or you can put button also.
</div>
This is what I understood of your problem: you wanted to make a button that scaled in accordance with the screen size AND you wanted it to be be centered.
I've pretty much done what you've been trying to do and achieved this.
.wrapper{
text-align: center;
}
button{
width: 50%;
...
}
Assigned the text align center property to the button's parent div and assigned the button a relative width.
body {
position: relative;
}
button {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
<body>
<button>CLICK ME</button>
</body>
see my pen for further explanation on how I used transform property of css