I'm running into problems trying to center a body element with CSS. I want it to be centered both horizontally and vertically on the page. The problem is that how it's written right now, it will center the text for short messages (i.e. under three words), but longer messages mess it up.
Here's my CSS: (it's an erb file for Sinatra, but I don't think that should impact how the CSS is interpreted)
body {
background: white;
/*TODO: still not perfect; changes based on length of message */
position: fixed;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
.message {
color: #2f4f4f;
font-family: 'Roboto', sans-serif;
font-size: 36;
text-align: center;
}
.form {
text-align: center;
}
input[type=number]{
width: 100%;
border: none;
border-bottom: 6px solid #2f4f4f;
background: transparent;
text-align: center;
color: #2f4f4f;
font-size: 25px;
font-family: 'Roboto';
}
input[type=number]:focus {
outline: none;
}
#btn{
display: none;
}
body {
/* ... */
position: fixed;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Please make sure you remove the margin.
Try use 'flexbox' to your page
.container {
display: flex;
height: 500px;
align-items: center;
justify-content: center;
}
<div class="container">
<div class="content">
Content
</div>
</div>
You can use display: flex
html, body {
width: 100%;
height: 100%;
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
}
Demo
HTML
<div class="test">
<div class="content">
<p class="para">test test test</p>
</div>
</div>
CSS
.test { }
.para {
width: 100%;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
Related
I am a beginner in HTML and StackOverflow and was trying to create a web page. I learned how to create this grid through some research but I am not sure how I would align it to the center of the web page. I tried using justify-content: center; but had no luck. Help would be greatly appreciated.
The actual web page
The CSS code:
.image-grid {
--gap: 16px 16px;
--num-cols: 4;
--row-height: 40px;
padding: var(--gap);
display: grid;
grid-template-columns: repeat(var(--num-cols), 1fr);
grid-auto-rows: car(--row-height);
gap: var(--gap);
}
img {
border-radius: 15px;
border: 5px solid;
}
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 150px;
height: 150px;
}
.overlay {
position: absolute;
top: 5px;
bottom: 0;
left: 5px;
right: 0;
height: 150px;
width: 150px;
opacity: 0;
transition: 0.5s ease;
border-radius: 10px;
background-color: rgb(149, 69, 53);
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: black;
font-family: "Courier New", Courier, monospace;
font-size: 20px;
font-weight: bold;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
The Html code (I have 16 pictures in my grid so the is basically repeated 16 times):
<div class="image-grid">
<div class="container">
<img
src="picture"
alt="Avatar"
class="image"
/>
<div class="overlay">
<div class="text">Angelite<br /><br />STONE OF AWARENESS</div>
</div>
</div>
<div>
You meant this?
.image-grid {place-items: center;}
By the way pay attention to your last line! Don't forget to close the tag!
To center the images inside the grid:
Your width: 50%; on your .container is causing this problem.
Remove it and then apply justify-items: center; to .image-grid.
div {
display: grid;
place-items: center;
}
Try this
I'm using Angular Material to build an application. I want to use mat-stroked-button, but I have encountered a problem. As you can see in the gif below, whenever I hover the button all text quickly moves down and then back up. I can't figure out why this is happening.
Here is the HTML:
<div id="home">
<div id="side">
<div id="info">
<h1>{{title}}</h1>
Info here
</div>
<div id="navigation">
<button mat-stroked-button *ngFor="let item of menuItems">{{item}}</button>
</div>
</div>
<div id="content">
<button mat-stroked-button>BUTTON</button>
<router-outlet></router-outlet>
</div>
</div>
app.component.css:
#home{
position: absolute;
display: flex;
top: 50%;
left: 50%;
width: 99%;
height: 98%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
#side{
width: 25%;
height: 100%;
display:flex;
flex-direction: column;
}
#info{
background: brown;
margin-bottom: 10px;
border: 1px solid black;
}
#navigation{
background: brown;
border: 1px solid black;
}
#info h1 {
margin: 0;
text-align: center;
}
#content{
width: 100%;
height: 100%;
background: gray;
}
button[mat-stroked-button]{
display: block;
width: 80%;
margin: auto;
margin-bottom: 5px;
margin-top: 5px;
}
styles.css:
#import "~#angular/material/prebuilt-themes/indigo-pink.css";
body, html, #home{
height: 100%;
width: 100%;
overflow: hidden;
margin: 0;
}
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
I have replicated the problem on stackblitz: https://stackblitz.com/edit/angular-sfbd5v
Thanks.
In app/appcomponent.css, remove the translate properties, and try the below code. It will stop the elements from jumping about.
#home{
position: absolute;
display: flex;
top: 2%;
left: 2%;
margin: auto;
width: 95%;
height: 95%;
}
Try adding your override styles for the button to hover as well
button[mat-stroked-button], button[mat-stroked-button]:hover {
I have a footer div with this code
.footer {
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
background-color: #DDD;
}
.center-xy {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.footer-text {
font-family: 'Calibri';
font-size: 0.8em;
}
.footer-text a {
text-decoration: none;
}
<nav class="footer">
<div class="center-xy footer-text">
Made with <span style="color: red; font-size: 1.5em;">♥</span> by <strong>Shantanu Banerjee</strong>
</div>
</nav>
The problem is the footer-text is well centered in Laptop Screens and mobile phones. But on Mobile Phones the text comes in 2-lines.
What is the solution?
I am not sure about the code(at the time of posting the comment), but it looks like there's a lot of padding because even with adequate visible space, the text is wrapping. So..
Reduce padding around the text. OR
Apply white-space: nowrap; for your text.
Just add the following css
.footer-text {
min-width: 200px;
text-align: center;
}
And it will be fixed.
Here's a working demo:
.footer {
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
background-color: #DDD;
}
.center-xy {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.footer-text {
font-family: 'Calibri';
font-size: 0.8em;
}
.footer-text a {
text-decoration: none;
}
.footer-text {
min-width: 200px;
text-align: center;
}
<nav class="footer">
<div class="center-xy footer-text">
Made with <span style="color: red; font-size: 1.5em;">♥</span> by <strong>Shantanu Banerjee</strong>
</div>
</nav>
try this:
.footer {
position: absolute;
bottom: 0;
margin:0;
background-color: #DDD;
left:0;
right:0;
padding:15px 0;
text-align:center
}
.center-xy {
}
.footer-text {
font-family: 'Calibri';
font-size: 0.8em;
}
.footer-text a {
text-decoration: none;
}
<nav class="footer">
<div class="center-xy footer-text">
Made with <span style="color: red; font-size: 1.5em;">♥</span> by <strong>Shantanu Banerjee</strong>
</div>
</nav>
just use
.center-xy {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
}
I am running into an issue where my contact-section-left is not centering in the parent div. This is not a vertical-align: top issue. You can see the border-right white line, that is showing how much the height extends for the contact-section-left div is, but I am it to be the same size as the right side with the image (sorry the example doesn't have the image).
I am not sure if I am going for the wrong approach here or what, but I am wanting it to look like the paint image I made below.
Any ideas?
.total-center {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#contact-section {
width: 100%;
background: #00a16d;
}
#contact-section-wrap {
padding: 2%;
}
#contact-section-left, #contact-section-right {
height: 100%;
display: inline-block;
color: #FFF;
font-size: 1.5em;
padding: 1% 0;
position: relative;
}
#contact-section-left {
width: 60%;
border-right: 1px solid #FFF;
font-style: italic;
}
#contact-section-right {
width: 30%;
text-align: center;
}
#contact-img {
background-image: url("../icons/envelope.png");
background-repeat: no-repeat;
background-size: auto;
margin: 0 auto;
display: block;
width: 128px;
height: 128px;
position: relative;
}
#contact-width {
width: 200%;
font-size: 2em;
}
.total-width {
width: 100%;
}
<div id="contact-section">
<div id="contact-section-wrap">
<div id="contact-section-left">
<div class="total-center total-width">Tell us more about your project.</div>
</div><div id="contact-section-right">
<div id="contact-img"><span class="total-center" id="contact-width">Contact us</span></div>
</div>
</div>
</div>
Your entire code can be simplified as follows. I use a pseudo element for the vertical line in between, and shift the position with order via flexbox.
jsFiddle
#contact-section {
display: flex;
justify-content: space-around;
align-items: center;
color: #FFF;
background: #00a16d;
padding: 1em 2em;
}
#contact-section:before {
content: "";
flex: 0 0 1px;
height: 2em;
background: #fff;
order: 2;
}
#contact-section-left {
font-size: 1.5em;
order: 1;
font-style: italic;
}
#contact-section-right {
background: url("https://i.imgur.com/cLMHUZE.png") center / contain no-repeat;
font-size: 2em;
order: 3;
padding: .5em 0;
}
<div id="contact-section">
<div id="contact-section-left">Tell us more about your project.</div>
<div id="contact-section-right">Contact us</div>
</div>
Assiging display: flex; align-items: center; to the parent of the left/right sections will display them side-by-side and center them vertically. Then if you move the border-right from the left (shorter) element to a border-right of the right (taller) element, the line should look more like you want it.
.total-center {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#contact-section {
width: 100%;
background: #00a16d;
}
#contact-section-wrap {
padding: 2%;
display: flex;
align-items: center;
}
#contact-section-left, #contact-section-right {
height: 100%;
display: inline-block;
color: #FFF;
font-size: 1.5em;
padding: 1% 0;
position: relative;
}
#contact-section-left {
width: 60%;
font-style: italic;
}
#contact-section-right {
width: 30%;
text-align: center;
border-left: 1px solid #FFF;
}
#contact-img {
background-image: url("../icons/envelope.png");
background-repeat: no-repeat;
background-size: auto;
margin: 0 auto;
display: block;
width: 128px;
height: 128px;
position: relative;
}
#contact-width {
width: 200%;
font-size: 2em;
}
.total-width {
width: 100%;
}
<div id="contact-section">
<div id="contact-section-wrap">
<div id="contact-section-left">
<div class="total-center total-width">Tell us more about your project.</div>
</div><div id="contact-section-right">
<div id="contact-img"><span class="total-center" id="contact-width">Contact us</span></div>
</div>
</div>
</div>
Your #contact-section-wrap doesn't have a height. The height: 100%s you are setting aren't really doing anything. They still rely on a parent height to have any idea what they're getting 100% of.
Try setting a height on #contact-section-wrap.
I've created a circle that contains a text, and the text needs to always be centered. Simple enough, and I've found a lot of examples of this with words on one row using line-height for example.
My problem is that the text will sometimes contain one row, sometimes two and sometimes three and I can't get that to work.
Any ideas?
I've created a fiddle here with three examples.
HTML:
<div class="container">
<div class="splash">Lorem</div>
</div>
<div class="container">
<div class="splash">Lorem ipsum</div>
</div>
<div class="container">
<div class="splash">Lorem ipsum dolor</div>
</div>
CSS:
.container{
position: relative;
width: 70px;
display: inline-block;
}
.splash {
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
height: 70px;
width: 70px;
background: green;
color: white;
position: absolute;
overflow: hidden;
display: table-cell;
text-align: center;
vertical-align: middle;
transform: rotate(15deg);
-ms-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
}
see this http://jsfiddle.net/tdtx3cfe/2/, I got it working with a little different approach, inserting the text into the span and making it display:table-cell, vertical-align:middle, change the splash to display:table, this will work even if you want to keep splash absolute
<div class="container">
<div class="splash"><span>Lorem<span></div>
</div>
<div class="container">
<div class="splash"><span>Lorem ipsum<span></div>
</div>
<div class="container">
<div class="splash"><span>Lorem ipsum dolor<span></div>
</div>
.container{
position: relative;
width: 70px;
display: inline-block;
}
.splash {
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
height: 70px;
width: 70px;
background: green;
color: white;
position: absolute;
overflow: hidden;
display: table;
text-align: center;
vertical-align: middle;
transform: rotate(15deg);
-ms-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
}
span{
display:table-cell;
vertical-align: middle;
}
You could create an extra span tag inside .splash and center it via position absolute and transform translate trick
.container{
position: relative;
width: 70px;
display: inline-block;
}
.splash {
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
height: 70px;
width: 70px;
background: green;
color: white;
position: absolute;
transform: rotate(15deg);
-ms-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
}
.splash span {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
For a markup like this :
<div class="container">
<div class="splash"><span>Lorem</span></div>
</div>
An example: http://jsfiddle.net/tdtx3cfe/3/
As one of the options, you can align splash with flexible boxes:
.container {
width: 70px;
height: 70px;
display: inline-flex;
border-radius: 50%;
background: green;
justify-content: center;
align-items: center;
}
.splash {
color: white;
text-align: center;
transform: rotate(15deg);
}
body {
display: flex
}
I had to add body style to vertically align containers.
JSFiddle.