After a number of hours of trying different styling I am unable to achieve the effect I want.
I have something similar to the following:
<section class="section-container>
<div>
full screen content which I want to centered (equal space above and below)
and left aligned.
</div>
</section>
<section class="section-container>
<div>
full screen content which I want to centered (equal space above and below)
and left aligned.
</div>
</section>
I have each section taking up 100vh which achieves the full screen effect I want. However, I now want equal spacing above and below which I have been unable to get (it often seems I'm trying to trick css into doing what I want). A couple of things I have tried
.section-container{
height:100vh;
margin-top:50%;
}
.section-container{
height:100vh;
margin: 50% 0;
}
.section-container{
height:100vh;
vertical-align: center;
}
What is it I'm doing wrong/misunderstadning? And is there a general techinque for achieving vertically centered content like this.
There are a lot of ways to do what you want. However, the easiest way to get centered content in modern CSS is probably with Flexbox. To center all of that content, try the following code:
.section-container{
height:100vh;
display: flex;
align-items: center;
}
<section class="section-container">
<div>
full screen content which I want to centered (equal space above and below) and left aligned.
</div>
</section>
align-items will center the children of the flexed element vertically, assuming no other flex properties. If you also want to center the content horizontally, add the property justify-content: center.
Here is a good resource on understanding centering of elements. Most likely the issue comes from using vh or vw. Below is an example that should work with your own work. See that I used px or % instead of vh or vw.
.section-container{
width: 500px;
}
div {
margin: 0 auto;
}
OR
.section-container{
width: 100%;
}
div {
margin-right: 10%;
margin-left: 10%;
}
You can achieve this by using flexbox.
First, you'll make the .section-container elements as flex
containers by adding the display: flex rule.
Then, you'll use justify-content: center to distribute same
spacing in both right and left.
Lastly, apply align-items: center to distribute same spacing in
both top and bottom.
Here's a revised version of your attempt :
.section-container {
height: 100vh;
display: flex; /** the element becomes a flex container that'll make the life much more easier **/
justify-content: center; /** center horizontally (same spacing left and right) **/
align-items: center; /** center vertically (same spacing top and bottom) **/
border: 1px solid red; /** just for the example so the result can be seen **/
}
<section class="section-container">
<div>
full screen content which I want to centered (equal space above and below) and left aligned.
</div>
</section>
<section class="section-container">
<div>
full screen content which I want to centered (equal space above and below) and left aligned.
</div>
</section>
Learn more about flexbox.
Hope I pushed you further.
I dont clearly understand your question, do you want to vertically center the text content inside the wrapper, i have made a snippet for what i got from you
.section-container{
height:100vh;
margin-bottom:50%;
background: red;
display: flex;
align-items:center;
color: #fff;
}
.section-container:last-of-type{
margin-bottom: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<section class="section-container">
<div>
full screen content which I want to centered (equal space above and below)
and left aligned.
</div>
</section>
<section class="section-container">
<div>
full screen content which I want to centered (equal space above and below)
and left aligned.
</div>
</section>
</body>
</html>
Related
What CSS will center the entire relatively-positioned body of ANY webpage, with no scrollbars, and equal clipping of overflow content on left and right of the viewport?
When the page renders, if the widest element is wider than the viewport, then i want the left and right sides of the content to "fall off" the sides of the screen. Overflow on both left and right should be clipped/hidden.
The width of the content is unpredictable, and may often be wider than the viewport. We should always see the middle slice, no scrollbars.
Not duplicate question
Please don't mark "duplicate". No answer in these questions achieves my desired aim. I've tested every one of them.
How to align entire html body to the center?
align body to center - centering body
How to center body on a page?
Unlike common answers in the above questions, I do not have the option to wrap the content in a div. I can only work with the html and body tags.
Required HTML:
This question doesn't allow to alter this html. Your CSS answer should work with any webpage. These element are just examples-- there would be many more, unpredictable elements in the html. You cannot wrap the content in a container div. Your CSS answer should show the center slice of the page, clipping off to the left and right whatever content doesn't fit on the screen.
<html>
<body>
Overflow to left
<div id="wider">Center-screen</div>
</body>
</html>
Required CSS
#wider {
width: 10000px;
border: 1px solid black;
text-align: center;
}
body {
position: relative;
}
You can't change this CSS, only add new CSS. Need position:relative on body.
The #wider element is just an example of wide content. The real-world usage would include many more elements of unpredictable width.
Output should render something like the image below, with no scrollbars. The text "Overflow to left" should be clipped off the screen to the left. The words "Center-screen" should be dead-center, horizontally.
Non-working solution 1:
The answer below, from a similar question, doesn't appear achieve my goal:
html,
body {
height: 100%;
}
html {
display: table;
width: 100%;
}
body {
display: table-cell;
text-align: center;
vertical-align: middle;
}
Non-working solution 2:
Another answer from a similar question doesn't seem to work for my scenario:
body {
width: 80%;
margin-left: auto;
margin-right: auto;
}
Fiddle:
This fiddle contains my HTML, along with the above failed answer. Feel free to test your answer in this fiddle.
Desired output from HTML above:
You just need absolute positioning + transform:translate style centering.
#wider {
width: 10000px;
border: 1px solid black;
text-align: center;
}
body {
position:absolute;
left:50%;
transform: translate(-50%);
margin:0;
overflow-x:hidden;
}
<html>
<body>
Overflow to left
<div id="wider">Center-screen</div>
</body>
</html>
If I understand you correctly, you could do something like this:
body {
overflow-x: hidden;
}
#wider {
width: 10000px;
border: 1px solid black;
text-align: center;
position: relative;
left: 50%;
transform: translate(-50%);
}
Overflow to left
<div id="wider">Center-screen
</div>
You Just add text align center in css code
HTML
<html>
<body>
Overflow to left
<div id="wider">Center-screen</div>
</body>
</html>
css
#wider{
text-align:center;
}
In order to achieve horizontal centered body,you will need to to use elements inside a div with these properties "flex-center flex-column",
<h5 class="animated fadeIn mb-3">Hello Mate.</h5>
<p class="animated fadeIn text-muted">Mostafa Harb</p>
these properties are what you want to achieve your aim :
<html>
<style>
.entire-div{
text-align: center;
align-items:center;
align-content:center;
justify-items:center;
align-items:center;
}
</style>
<body>
<div class="entire-div">
<h1>Hello</h1>
</div>
</body>
</html>
I have created a div box with flexbox.
This box has a min-height:
https://jsfiddle.net/m267w3ku/1/
Code:
<section id="welcome-section">
<h1>Hey, I am Someone!</h1>
</section>
#welcome-section{
background-color:#5998ff;
display:flex;
justify-content:center;
align-items:center;
min-height:400px;
width:100%;
}
What I have: Text is in center, box has min-height of 400px.
Problem Text does not always stay center when minimizing the browser
What I want Text always stay center relative of the box size even when minimizing browser
When minimizing browser now, this happens eventually:
The text is staying vertically centered relative to the box size for me. In what scenario it doesn't work like that for you?
If what you want is the blue box to be 100% of the window height try:
height: 100vh;
Try to add text-align: center: https://jsfiddle.net/82x7vm9h/
#welcome-section {
background-color: #5998ff;
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
font-size: 60px;
}
<section id="welcome-section">
<h1>Hey, I am Someone!</h1>
</section>
Hope it will help you
I am vertically and horizontally center a div with the following markup/css:
.wrapper {
display: table;
}
.content {
display: table-cell;
vertical-align: middle;
text-align: center;
}
<div class="wrapper">
<div class="content">
centered content
</div>
</div>
My content looks fine when the browser is wide enough. However, I would like to somehow define a smaller width the content should stay within when resizing the width of the browser. I have text I don't want running into the right and left edge of the browser when it gets small enough, so I'd like to wrap it onto more lines. What is the best way to handle this responsively?
Try giving your wrapper a width and set margin to auto
MDN Link
.wrapper{ width:50%; margin:0 auto; }
I'm looking for an easy and elegant solution to do the following:
I've seen a bunch of Q&A here on StackOverflow, however the majority describes some fixed (known) sizes in pixels. What I would like to achieve is really flexible layout where:
1) Position the div at certain vertical position and have it a certain height -> solved with setting position: fixed; top: 30%; height: 40%;
2) Position the div at the center horizontally -< tried width: auto; margin: 0 auto; but this didn't work
3) Size the nested divs (I'm using the spans right now, but probably that doesn't matter in this context) with their height equal to their width and height of 1 line to be equal to 1/3 (roughly) of the parent div. Also I would like those nested divs to be content agnostic, i.e. set the font size based on the size of the div rather than pushing the divs by increasing the text size. Also, so far the whole thing will break if I exclude couple of captions from the nested divs
So far it looks like this:
I'm pretty sure this is achievable without any js and I'd be happy to get any advice on this.
Thanks
Update 1: I'm updating the post with the link to fiddle, thanks to Sari for the advice.
You may want to consider using a flexbox for this layout. By its nature a flexbox is a flexible box.
Try this:
HTML (no changes to your fiddle demo)
<div id="flexdiv">
<div id="li1" class="li">
<span id="l1" class="l">1</span>
<span id="l2" class="l">2</span>
<span id="l3" class="l">3</span>
<span id="l4" class="l">4</span>
</div>
<div id="li2" class="li">
<span id="l5" class="l">5</span>
<span id="l6" class="l">6</span>
<span id="l7" class="l">7</span>
<span id="l8" class="l">8</span>
</div>
<div id="li3" class="li">
<span id="l9" class="l">9</span>
<span id="l10" class="l">A</span>
<span id="l11" class="l">B</span>
<span id="l12" class="l">C</span>
</div>
</div>
CSS
html, body { height: 100%; }
body {
display: flex; /* establish flex container */
justify-content: center; /* center #flexdiv horizontally */
align-items: center; /* center #flexdiv vertically */
}
#flexdiv {
display: flex; /* establish (nested) flex container */
flex-direction: column; /* align li boxes vertically */
height: 48vmin; /* height relative to viewport size */
}
.li {
display: flex;
text-align: center;
height: 16vmin; /* height relative to viewport size */
}
.l {
width: 16vmin; /* boxes maintain aspect ratio */
line-height: 16vmin; /* vertically center text */
font-size: 7vmin; /* font size scales */
}
DEMO: http://jsfiddle.net/6bsoze4z/4/
Try setting top using the calc function:
top: calc(30%);
Looking to have an image (logo) on the left side of a div with text (a title) centered on the div. A basic question, but some caveats.
If I use position: absolute on the image, the text is centered, but when I resize the window the image covers the text. Want this to be a responsive page where the text is centered until it hits the image and the won't overlap. https://jsfiddle.net/mwqwmkdm/
If I use float: left on the image, then the text is not really perfectly centered. https://jsfiddle.net/mwqwmkdm/1/
I could create a margin-right of equal size on the other side of the text, but then I'm wasting those pixels on smaller displays and I don't want to do that. Eventually, it will be more than that one line I am centering. https://jsfiddle.net/mwqwmkdm/2/
Basically, I want:
the text centered as long as the screen is wide enough
the text to wrap around the image and not be in front of or behind it when the screen isn't wide enough
not to lose any screen space except for the image itself
Thanks
If you're willing to try an alternative to CSS float and positioning properties you can easily accomplish your task with CSS Flexbox. Code is clean, simple, efficient and easy to maintain. Also, flexbox is now supported by all major browsers.
DEMO
HTML
<div id="container">
<img src="http://placehold.it/100x100" width="100" heigth="100">
<p>centered text</p>
</div>
CSS
#container {
display: flex;
border: 2px solid black;
background-color: aqua;
}
img {
margin: 10px;
}
p {
border: 1px dashed red;
padding: 5px;
flex-grow: 1;
text-align: center;
}
UPDATE
Here's one way to keep your text centered on the full width of the container, while not allowing the text and image to overlap on smaller screens. No flexbox, no deprecated tags. Just a very simple media query.
Wide screen
Narrow Screen
DEMO
Flex box has compability problems with some browser. Just Create BFC for the <center></center> using overflow:hidden;
Check this out! jsfiddle
You can use flexbox like this:
.wrapper{
display: flex;
}
.content{
flex-grow: 1;
text-align: center;
}
<div class="wrapper">
<img src="http://placehold.it/100x100" width="100" heigth="100">
<div class="content">
Centered Text
</div>
</div>
Check this out for more info https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background
Edit:
To center it respect to the container you can use a modification of you second example using float: left but instead to set the margin to the center you would put the text in a span and set the margin-right to it like this:
img {
float: left;
}
.content {
text-align: center;
}
.content span{
margin-right: 100px;
}
<div>
<img src="http://placehold.it/100x100" width="100" heigth="100">
<div class="content">
<span>Centered Text</span>
</div>
</div>