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; }
Related
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>
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>
The page I'm working on has a responsive view.
Products are listed on the page and the product listing scales with the page width.
I want to position the product image in the centre of it's container so that the image takes up the width and size of it's container AND is always centred with the image centre in the centre of .product
<div class='product'>
<div class="image_wrapper">
<a href="/products/1">
<img scr="http://awesome.image.com/1.jpg">
</a>
</div>
</div>
since the page is responsive, the content width and height are variable
Can anybody advise?
Update
I've created this fiddle to better explain the problem:
As the screen size gets smaller, the image should remain positioned in the centre, with the tower staying centred. The black shading on the edges should slip out of view if the image is wider than it's container
http://jsfiddle.net/gavinmorrice/aUL29/
Here is the solution my friend :)
.product {
width: auto;
margin: auto;
}
#image_wrapper {
width: 100%;
display: table;
background-image:url("http://drinkdeals-1-asia.s3.amazonaws.com/development/venues/9a6f8955a3ab7670217425cb50c171ea/wide_venue.jpg");
height:300px;
background-position:center;
background-repeat:no-repeat;
}
Change your CSS to the above and then remove the image tag from your HTML and CSS :)
have you tried using
.image_wrapper img{
min-width:100%;
}
hope it helps
you image_wrapper div has to get the css as follows:
.image-wrapper {
display: table;
width: 100%;
}
the img element has to get following code and it will be rendered completly in the middle
img {
display: table-cell;
text-align: center;
vertical-align: middle;
}
Also in this Blogpost you will find further information about centering elements horizontal and vertical.
Here is example: [http://jsfiddle.net/9X6zD/2/][x]
Parent must have position:relative, and element margin:auto; and display: block;
[demo][1]
I am implementing a carousel with images. The carousel is 960px wide, and contains 5 images in containers of width 960px/5 = 192px (and height 119px).
I want the images to be as large as possible inside their containers, without changing the aspect ratio of the images. I also want the images to be centered both horizontally and vertically within their container.
By hacking around for hours, and using the center tag, I have managed to construct what I describe above. Please see a fiddle here.
The problem is with the container of the second image (as shown by the black border). While the second image is centered horizontally, the container is shifted down a little.
I'm trying to implement an overlay on the images, and need the containers to all be at the same height. How can I have the containers all at the same height? Is there a better/cleaner approach that does not use the center tag?
You could add vertical-align:top; to your #carousel-images .image{} css
Or middle or bottom...
Uh? Why did I get downvoted on this?
http://jsfiddle.net/y2KV7/
I got it to work by doing the following:
HTML:
<div id="wrapper">
<div id="carousel-images">
<img src="http://eurosensus.org/img/initiatives-300/30kmh.png" />
<img src="http://eurosensus.org/img/initiatives-300/affordableEnergy.png"/>
<img src="http://eurosensus.org/img/initiatives-300/basicIncome.jpg"/>
<img src="http://eurosensus.org/img/initiatives-300/ecocide.jpg"/>
<img src="http://eurosensus.org/img/initiatives-300/educationTrust.jpg"/>
</div>
</div>
CSS:
#wrapper
{
width: 100%;
text-align: center;
background: blue;
}
#carousel-images
{
width: 960px;
white-space: nowrap;
font-size: 0;
margin: 0 auto;
}
#carousel-images img
{
display: inline;
max-width: 192px;
max-height: 119px;
border: 1px solid black;
vertical-align: middle;
}
Click here to view working jsFiddle demo
First, don't make the world come back to 10 years ago. do not use tag for formating. I would also suggest you to get some reading about different between div and span as well as display attribute. you could easily find information on http://www.w3schools.com.
if you want a center container. you could use css margin auto trick.
like margin:5px auto; would center the container horizontally.
http://jsfiddle.net/zEcn3/12/
I'm trying to get a div content that resizes to the number of divs that fit in a line. So the example works fine when the window is bigger than all the item divs combined so they're all in a row, but when the window is resized smaller so one of the items is reflowed to the next row, the content div's width is 100% instead of shrink wrapped.
The reason I want this is so I can have centered content with a menu bar above the content that shrinks to the size of the combined reflowed content.
HTML:
<div class="wrapper">
<div class="content">
<div class="item">Hello.</div>
<div class="item">Hello.</div>
<div class="item">Hello.</div>
<div class="item">Hello.</div>
<div class="item">Hello.</div>
</div>
</div>
CSS:
.item {
float: left;
width: 70px;
border: 1px solid black;
}
.content {
display: inline-block;
border: 1px solid black;
}
.content:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
A friend figured it out for me, the answer is to use media queries.
#media (max-width: 1080px) {
#main {
max-width: 640px;
}
}
So I set at the intervals of the width of each item div, so when the viewing window is smaller than a certain number, it sets the width of the container to the next level down.
I'm not quite sure if you were trying to remove the 100% width on the container, or just have the container shrink along with the content, depending on the size of the screen.
The problem, as I see it, is that when I shrink the screen, the last "Hello" on the right side gets pushed down to the next row.
So what I did is set 100% width to the wrapper. I then just removed the fixed width from the items and changed it to % widths. In this case I took the number of boxes and divided them into 100%, which was 20% each (but with 1px border I reduced to 19% each). Also, I added display:block; margin-left:auto; margin-right:auto; to the id="content".
Here's the link to JS Fiddle: http://jsfiddle.net/rm2773/Lq7H7/
I found the answer here:
http://haslayout.net/css-tuts/CSS-Shrink-Wrap
It basically amounts to using display: inline-block; on the block element you want to shrink to fit its contents.
Try to use margin:auto to the container <div> and set a fixed position.