I'm trying to align text and button vertically as well as horizontally and cannot make it...
What I want ultimately is that alignment was responsive.
My code:
HTML:
<div id="stage">
<div id="stage-caption">
<h1 class="display-3">Gallery Nellija</h1>
<p>Some description</p>
Sign up now
</div>
</div>
CSS:
#stage {
background: url('img/stage.jpg') center center no-repeat;
background-size: cover;
color: white;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#stage-caption {
font-size: 1.4rem;
font-weight: 200;
max-width: 60rem;
margin: 0 auto;
}
#stage-caption h1 {
color: white;
font-weight: bold;
text-transform: uppercase;
}
For now it looks like that:
Thanks in advance!
Add text-align:center to #stage
Related
I am trying to make it so the second section or the first section will align center with the top.
What I don't understand is the relationship between items with display flex vs items that have display block.
First Question: Is there a way with flex so the top logo doesn't look "off" center compared to the centered text in the second section?
Link To Pen: https://codepen.io/skella1/pen/vYZLdVN
<div class="header">
<img src="https://via.placeholder.com/100x50" alt="">
<p>Text Goes Here</p>
</div>
<div class="secHeader">
<h1>Welcome</h1>
<p>This is a page to login</p>
</div>
<div class="content">
<div class="login">
<p style="padding-right: 10px;">Login</p>
<input type="text">
<button>Login</button>
</div>
</div>
body {
margin: 0px;
padding: 0px;
}
.header {
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0px;
img {
margin: 0 auto;
}
}
.secHeader {
background-color: #ddd;
text-align: center;
display: block;
line-height: 0px;
padding: 20px;
h1 {
text-transform: uppercase;
font-weight: 900;
}
}
.content{
background: url("http://www.placebear.com/500/300") center center no-repeat;
background-size: cover;
width: 100%;
height: 100vh;
position: relative;
.login {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0px;
justify-content: center;
flex-direction: row;
align-items: center;
display: flex;
}
}
Center the image using justify-content: center on the flex parent element and then set the P elements position to absolute and position it using the top/right properties.
Right now you have two elements that are taking up space in the flex parent elements width. The image and the P tags content. Using justify-content: space-between will place the remainder of the width the elements do not use, between them. In turn skewing the look of the image from being in the center regardless of your margin set to 0 auto, as that only places it in the center of the space it takes up from the parent.
body {
margin: 0px;
padding: 0px;
}
.header {
height: 50px;
display: flex;
justify-content: center;
align-items: center;
padding: 0px;
}
.header p {
position: absolute;
top: 0;
right: 20px;
}
.secHeader {
background-color: #ddd;
text-align: center;
display: block;
line-height: 0px;
padding: 20px;
}
.secHeader h1 {
text-transform: uppercase;
font-weight: 900;
}
.content {
background: url("http://www.placebear.com/500/300") center center no-repeat;
background-size: cover;
width: 100%;
height: 100vh;
position: relative;
}
.content .login {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0px;
justify-content: center;
flex-direction: row;
align-items: center;
display: flex;
}
<div class="header">
<img src="https://via.placeholder.com/100x50" alt="">
<p>Text Goes Here</p>
</div>
<div class="secHeader">
<h1>Welcome</h1>
<p>This is a page to login</p>
</div>
<div class="content">
<div class="login">
<p style="padding-right: 10px;">Login</p>
<input type="text">
<button>Login</button>
</div>
</div>
Answer to Question 1) A really quick fix to this was using the transform property in CSS to center the image with respect to the current position
Answer to Question 2) Simply set the max-width property on the .content class to prevent the scrolling you talked about
body {
margin: 0px;
padding: 0px;
}
.header {
height: 50px;
width:100%;
display: flex;
justify-content: space-around;
align-items: center;
padding: 0px;
img {
margin: 0 auto;
transform:translate(50%,0%); /* MODIFIED CODE HERE */
}
}
.secHeader {
background-color: #ddd;
text-align: center;
display: block;
line-height: 0px;
padding: 20px;
h1 {
text-transform: uppercase;
font-weight: 900;
}
}
.content{
background: url("http://www.placebear.com/500/300") center center no-repeat;
background-size: cover;
height: 100vh;
max-width:100vw; /* MODIFIED CODE HERE */
position: relative;
.login {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0px;
justify-content: center;
flex-direction: row;
align-items: center;
display: flex;
}
}
If you're insisting on using flexbox for the header, what you can do is the following:
<div class="header">
<div>
</div>
<div class="text-center">
<img src="https://via.placeholder.com/100x50" alt="">
</div>
<div class="text-right">
<p>Text Goes Here</p>
</div>
</div>
.header {
height: 50px;
display:flex;
padding: 0px;
justify-content: space-between;
div {
flex:1;
}
div.text-center {
text-align:center;
}
div.text-right{
text-align:right;
}
}
Please note that this is just a workaround, flexbox is not the only solution here. You might use position:absolute for this.
I've been trying to align text to the right of an image but no matter what I do -- when the text line gets to be too long -- it keeps showing up right underneath the image instead of continuing onto the next line next to the image. I've tried to add a display inline for the text but it doesn't change a thing. I've also attempted to float the image to the left but it ends up cutting my image in half.
p {
text-align: right;
color: white;
font-size: 20px;
font-family: orpheuspro, serif;
font-style: normal;
align-items: center;
line-height: 2.5;
text-transform: capitalize;
font-size: 30px;
justify-content: right;
float: right;
padding-right: 100px;
padding-bottom: 90px;
overflow: auto;
}
img {
padding-left: 90px;
opacity: 0.55;
height: auto;
}
div {
position:relative;
background-color: #361833;
min-height: 40vh;
}
The HTML file :
<div>
<div>
<br>
<img src='../../assets/img/image0.jpeg' alt="wj" width="500"/>
<p>some loooooooooooooooooooooooooooong text here shdfklshjfsldfhskdjfzf</p>
</div>
</div>
Any guidance would be appreciated as I'm pretty new to CSS! Thanks!
try this instead using flex property instead of float.
Also add to p tag word-break:break-word; to align next line
Result desktop view:
Mobile view:
p {
text-align: right;
color: white;
font-size: 20px;
font-family: orpheuspro, serif;
font-style: normal;
align-items: center;
line-height: 2.5;
text-transform: capitalize;
font-size: 30px;
justify-content: right;
padding-right: 100px;
padding-bottom: 90px;
overflow: auto;
word-break:break-word
}
img {
padding-left: 90px;
opacity: 0.55;
height: auto;
}
.nav {
position:relative;
background-color: #361833;
min-height: 40vh;
display:flex;
flex-wrap:nowrap;
}
#media only screen and (max-width:768px){
.nav {
display:flex;
flex-direction:column;
}
}
<div>
<div class="nav">
<img src='https://i.stack.imgur.com/amhjm.png' alt="wj" width="500"/>
<p>some loooooooooooooooooooooooooooong text here shdfklshjfsldfhskdjfzf</p>
</div>
</div>
Ended up solving this problem by setting a width to my text!
I know this question has been up for a while, but I've simplified this so the image doesn't get squished. Not sure why that was a viable solution anyway.
header {
background-color: #361833;
}
.nav {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
max-width: 1100px;
margin: 0 auto;
}
.nav img {
height: auto;
max-width: 100%;
opacity: 0.5;
}
.nav p {
color: white;
text-transform: capitalize;
text-align: center;
}
#media screen and (min-width: 768px) {
.nav {
flex-direction: row;
}
}
<header>
<div class="nav">
<img src='https://i.stack.imgur.com/amhjm.png' alt="wj"/>
<p>some loooooooooooooooooooooooooooong text here shdfklshjfsldfhskdjfzf</p>
</div>
</header>
apologies. Just after some help, I can't get the button to centre and to fit correctly on a mobile device. I have a hidden div so when you click on the button it appears and that seems to be working ok.
I don't think I'm structuring the CSS well so any help would be appreciated. Thanks.
HTML
<div class="container">
<button type="button" data-toggle-page="#home" class="button">Home
designing</button>
</div>
<div id="home" class="page">
<div class="section">
<h2 class="kitchen">Kitchen</h2>
</div>
<div class="section">
<h2><a style="text-decoration: none" href="Lounge">Lounge</a></h2>
</div>
<div class="section">
<h2><a style="text-decoration: none" href="Dining">Dining room</a></h2>
</div>
<div class="section">
<h2><a style="text-decoration: none" href="Hall">Hallway</a></h2>
</div>
</div>
CSS
body {
font-family: 'Montserrat', sans-serif;
background: url(image.jpg) no-repeat center center;
background-attachment: fixed;
background-size: 100% 100%;
}
.container {
text-align: center;
max-width: 100%;
}
.button {
background-color: rgba( 0, 0, 0, 0);
/* text-align: center;*/
margin-top: 200px;
font-size: 100px;
color: #fff;
font-family: 'Montserrat Subrayada', sans-serif;
border: none;
outline: none;
}
.page {
position: absolute;
visibility: hidden;
pointer-events: none;
text-align: center;
}
You could center the element with flexbox:
.container {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
max-width: 100%;
}
align-items: center; will center vertically.
justify-content: center; will center horizontally.
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 4 years ago.
I want to make <h1> centered.
Problem:
When I center the text horizontally, I can't center it vertically, and if I center it vertically, then I can't do it horizontally .
My code :
h1 {
font-weight: 400;
text-transform: uppercase;
font-size: 28px;
}
.main-text {
text-align: center;
}
<header>
<div class="main-text">
<h1>This is Centered Text.</h1>
</div>
</header>
What I Tried :
Here are the some CSS that I tried .
.main-text {
text-align: center;
vertical-align: middle;
}
The below code works but then the text isn't responsive .
.main-text {
position: absolute;
top: 30%;
left: 30%;
}
How I want it to look:
Solution 1: Use CSS 2D transforms
You can use the good old trick of positioning the <h1> element absolutely, use 50% for left and top cardinal coordinates, and then translate it to the top and left by half of its own dimensions. Note that you must declare an explicit height on the parent, otherwise the trick will not work.
h1 {
font-weight: 400;
text-transform: uppercase;
font-size: 28px;
}
.main-text {
position: relative;
width: 100%;
/* You need to define an explicit height! */
height: 100vh;
}
.main-text h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
text-align: center;
}
<header>
<div class="main-text">
<h1>This is Centered Text.</h1>
</div>
</header>
Solution 2: Use flexbox
Since flexbox is very widely supported, you can also use it. This can be done by simply declaring the following rules on the parent wrapping element:
.main-text {
display: flex;
align-items: center;
justify-content: center;
}
h1 {
font-weight: 400;
text-transform: uppercase;
font-size: 28px;
}
.main-text {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
/* You need to define an explicit height! */
height: 100vh;
}
<header>
<div class="main-text">
<h1>This is Centered Text.</h1>
</div>
</header>
body{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
min-height: 100vh;
}
<div class="main-text">
<h1>This is Centered Text.</h1>
</div>
If you can use the flex, try to use the flex.
If you want to get more information about the flex,
visit here https://codepen.io/enxaneta/pen/adLPwv?q=flex&limit=all&type=type-pens
Here's what I've got so far:
http://codepen.io/anon/pen/jPQjMZ
HTML:
<div class="container">
<div class="info">
This Is Info
</div>
</div>
<div class="container">
<div class="info">
This Is More Info
</div>
</div>
CSS: (LESS)
body {
background: #000;
}
.container {
background: #eee;
width: 150px;
height: 200px;
display: inline-block;
vertical-align: top;
}
.info {
background: #404040;
color: #fff;
display: flex;
display: -ms-flexbox;
align-items: center;
-ms-align-items: center;
font-size: 1.4em;
padding: 1em;
text-align: center;
height: 20px;
//overflow: hidden;
}
This works great in Chrome and Firefox. But in IE10, the text fails to wrap:
What's going on and how do I fix this? I don't necessarily have to use flexbox, but it's the only way I could figure out how to center the text perfectly within the div whether it's one line or two.
If you wrap your info text in an extra <span>, you can use the double line-height trick from this other question to vertically center the text (without using flexbox):
How do I vertically align something inside a span tag?
Note: I had to remove the vertical padding and instead set the total height to 3em
.info {
background: #404040;
color: #fff;
font-size: 1.4em;
padding: 0 1em;
/*height: 3em;*/
line-height: 3em;
text-align: center;
}
.info span {
display: inline-block;
line-height: 1em;
vertical-align: middle;
}
Updated Pen: http://codepen.io/anon/pen/aOQegy