I'm working on a small site and I can't seem to figure out how to center my name vertically. I put my CSS in the HTML file, just so you can see everything I'm doing. Thanks in advance!
<head>
<title>Test</title>
<style>
section {
height: 100vh;
}
.test1 {
background: grey;
}
.name {
border: 3px solid white;
color: white;
padding: 25px 0;
width: 35%;
}
</style>
</head>
<body>
<section class="test1">
<div class="container">
<div class="row">
<h1 class="text-center name center-block">Dylan Bailey</h1>
</div>
</div>
</section>
</body>
This should be all you need if you only have one element on the page. You'll have to remove the default margin that's set by the h1 tag also.
body {
background: grey;
width: 100%;
height: 100%;
}
h1.name {
border: 3px solid white;
color: white;
padding: 25px;
margin: 0;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<h1 class="name">Dylan Bailey</h1>
Use property height and line-height the value of both should be same and this will align the data in the center :)
Just use the grid that comes with bootstrap. No CSS needed.
<body>
<section class="test1">
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<h1 class="text-center name">Dylan Bailey</h1>
</div>
</div>
</div>
</section>
</body>
https://jsfiddle.net/DTcHh/14701/
Related
So In my website I am using the current code to split the page in 50% and 50%. But I want to chang it to 70% and 30%. The code below is my current code.
body {
font-family: Arial;
color: white;
}
.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
background-color: red;
}
.right {
right: 0;
background-color: blue;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="split left">
<div class="centered">
<h2>70%</h2>
<p>Some text</p>
</div>
</div>
<div class="split right">
<div class="centered">
<h2>30%</h2>
<p>Some text</p>
</div>
</div>
</body>
</html>
I tried changing the left: 50%; to 70%, but that just moves the text a bit to the right.
Remove 50% from the .split class and add width: 70% in .left, width: 30% in .right.
body {
font-family: Arial;
color: white;
}
.split {
height: 100%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
background-color: red;
width: 70%;
}
.right {
right: 0;
background-color: blue;
width: 30%;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
<div class="split left">
<div class="centered">
<h2>70%</h2>
<p>Some text</p>
</div>
</div>
<div class="split right">
<div class="centered">
<h2>30%</h2>
<p>Some text</p>
</div>
</div>
Fiddle code
I want to add button to images (display a button on top of an image with center position). Thing goes well if the image is 100% width. But if it's 50% width, the button isn't centered on top of the image.
.container {
position: relative;
width: 100%;
max-width: 1000px;
}
.container img {
width: 100%;
height: auto;
}
.container .btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
<h2>Button on Image</h2>
<p>Add a button to an image:</p>
<div class="container">
<img src="img_snow.jpg" alt="Snow" style="width:100%">
<button class="btn">Button</button>
</div>
<div class="container">
<img src="img_snow.jpg" alt="Snow" style="width: 200px; float:left;margin-left:15%">
<button class="btn">Button</button>
</div>
Wrong output:
Click to see the image
Thank you so so much!!
The button will stay in the center of container because the absolute position looks for nearest relative element.
now you have two options:
1- set image in center of container by adding a margin-left:25%
2- set container width to 50% instead of image width
look at this please :
<h2>Button on Image</h2>
<p>Add a button to an image:</p>
<div class="container">
<img src="https://picsum.photos/800/600" alt="Snow" style="width:100%">
<button class="btn">Button</button>
</div>
<div class="container">
<img src="https://picsum.photos/200/200" alt="Snow" style="width:50%; margin-left:25%;">
<button class="btn">Button</button>
</div>
<div class="container" style="width:50%">
<img src="https://picsum.photos/200/200" alt="Snow" style="">
<button class="btn">Button</button>
</div>
Code Pen
I suggest you style it like this. The container is dimensioned by the image size, and the button is positioned absolutely relative to the container at 50% horizontally and vertically by the half of its own dimensions, then translated leftwards and upwards by the half of the button's dimensions (-50%, -50%).
.container {
position: relative;
display: inline-block;
}
.container>img {
display: block;
}
.container>button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
<div class="container">
<img src="https://www.cinematheque.fr/cache/media/01-films/la_maison_du_docteur-e/s,725-75eea0.jpg">
<button>Button</button>
</div>
<div class="container">
<img style="width: 200px;" src="https://www.cinematheque.fr/cache/media/01-films/la_maison_du_docteur-e/s,725-75eea0.jpg">
<button>Button</button>
</div>
i have a div that i want to place below another div.But i think its getting overlapped and is not visible. I'm trying to get a div below the div that split into 2.
<body>
<div class="split left">
<div class="centered">
<img src="assets/img/tms1.png" alt="Avatar woman" />
<h2>our solution</h2>
</div>
</div>
<div class="split right">
<div class="centered">
<img src="assets/img/logo.jpg" alt="Avatar man" />
<h2>our cause</h2>
</div>
</div>
<div class="page2"><img src="assets/img/logo.png" /></div>
the <div class="page2"><img src="assets/img/logo.png" /></div> is not visible.
css:
body {
font-family: sans-serif;
font-size: 30px;
color: white;
height: 100%;
}
.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
background-color: #111;
}
.right {
right: 0;
background-color: white;
color: black;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.centered img {
width: 250px;
border-radius: 50%;
}
css for the div that is not getting displayed.
.page2 {
position: relative;
margin-top: 100%;
top: 100%;
width: 100%;
background-color: #111;
}
https://jsfiddle.net/uxfynrmj/
There are a few issues. Most importantly, you need to remove the position: fixed if you want another element statically positioned below your .split divs.
Most notably I removed the fixed position and absolute positioned child and added a wrapping div width display: flex.
Code snippet below:
html {
scroll-behavior: smooth;
/*height: 100%;*/
}
body {
font-family: sans-serif;
font-size: 30px;
color: white;
height: 100%;
}
.splits {
display: flex;
}
.split {
flex: 1 1 50%;
background: black;
}
.right {
right: 0;
background-color: white;
color: black;
}
.centered {
position: relative;
top: 50%;
transform: translateY(-50%);
text-align: center;
}
.centered img {
width: 100px;
height: 100px;
border-radius: 50%;
}
.page2 {
width: 100%;
background-color: pink;
}
.page2 img {
width: 100%;
background-color: pink;
}
<html>
<head>
<title>THS</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="splits">
<div class="split">
<div class="centered">
<img src="http://lorempixel.com/400/200" alt="Avatar woman" />
<h2>our solution</h2>
</div>
</div>
<div class="split right">
<div class="centered">
<img src="http://lorempixel.com/400/400" alt="Avatar man" />
<h2>our cause</h2>
</div>
</div>
</div>
<div class="page2"><img src="http://lorempixel.com/400/400" /></div>
</body>
</html>
How do I get the two images contained within the two divs to display side-by-side? I've tried changing the variables within container as display: inline-block; and float: left; as suggested by some other threads, but those did not work the way I tried them.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.container:hover .overlay {
height: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h2>Slide in Overlay from the Bottom</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</body>
</html>
How it looks:
I want these to be displayed side-by-side, not on top of one-another.
If you wrap the two containers in a div set to display: flex you'll be fine.
<div class="wrapper">
<div class="container">
<!-- your content -->
</div>
<div class="container">
<!-- your content -->
</div>
</div>
.wrapper {
display: flex;
}
I hope it helps :)
Simply add float:left to the container class.
Result:
I have a set of divs whose dimensions are set by percentage:
<div class="parent">
<div class="x20">content 1</div>
<div class="x4">gutter</div>
<div class="x20"> content 2 </div>
<div class="x4">gutter</div>
<div class="x20"> content 3 </div>
<div class="x4">gutter</div>
<div class="x20"> content 4 </div>
<div class="x4">gutter</div>
</div>
.parent {
position: absolute;
left: 50%;
top: 50%;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
.x20 {
height: 20%;
border: 2px solid #f0f;
vertical-align: text-bottom text-align: center;
position: relative
}
.x4 {
height: 4%;
border: 2px solid #ccc;
}
How can I get the "content" to be bottom aligned?
Flexbox method can solve this with two lines of code.
display: flex and align-items: flex-end on the content element.
.parent {
position: absolute;
left: 50%;
top: 50%;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
.x20 {
height: 20%;
border: 2px solid #f0f;
vertical-align: text-bottom text-align: center;
position: relative;
display: flex; /* Add to initiate the flex box layout */
align-items: flex-end; /* Add to align the content to cross-axis end */
}
.x4 {
height: 4%;
border: 2px solid #ccc;
}
<div class="parent">
<div class="x20">content 1</div>
<div class="x4">gutter</div>
<div class="x20">content 2</div>
<div class="x4">gutter</div>
<div class="x20">content 3</div>
<div class="x4">gutter</div>
<div class="x20">content 4</div>
<div class="x4">gutter</div>
</div>
try adding like
.x20 p {
position:absolute;
bottom: 0px;
}
and then including
<p> content 1</p>
that works for me..
http://codepen.io/anon/pen/qObBKQ
You could try the following :
HTML
<div class="x20">
<div class="x10"> content 1</div>
</div>
CSS
.x20 {
height: 20%;
border: 2px solid #f0f;
position: relative
}
.x10 {
position: absolute;
bottom: 0;
left: 50%;
}
Add another div inside your content container and position that absolute should solve your problem.
See the following JSFIDDLE - LINK
try:
.x20 {
height: 20%;
border: 2px solid #f0f;
vertical-align: bottom;
text-align: center;
display: inline-block ;
}
.x4 {
height: 4%;
border: 2px solid #ccc;
display: inline-block ;
vertical-align: bottom ;
}