Creating a gallery of divs with links images and text. problem is- can't get the inner wrapper to center everything. margin:0 auto; isnt working because i havent set a width for it. but i want the width to change with different browser sizes but that the inner .prjctwrap divs will be centered within it. here's my markup:
HTML :
<div id="wrapper">
<div id="innerprjctwrap">
<div class="prjctwrap">
<a href="http://www.google.com">
<div class="imageCont" style="background-image:url(image1.jpg);">
</div>
<div class="text">Text Text Text</div> </a> </div>
...this reapeats from prjctwrap with other images, text and links
</div></div>
CSS:
#wrapper {
background-color: #FFFFFF;
width:100%;
height:1000px; }
.prjctwrap {
display:inline-block;
width: 130px;
height:180px;
overflow:hidden;
margin:15px; }
.prjctwrap .imageCont{
width: 130px;
height: 100px;
background-size: cover; }
.prjctwrap .text {
text-align: center;
color: black;
text-decoration: none;
height:80px; }
.prjctwrap a {
text-decoration:none; }
#innerprjctwrap {
margin:0px auto; }
You haven't set any size on the #innerprjctwrap element, so it will have the default setting width: auto;. That means that it will use the full width available, so you can't see that it's actually centered.
Set a width on the element, and you will see that it is centered:
#innerprjctwrap {
width: 130px;
margin: 0 auto;
}
If you want to use text alignment to center the content inside the element, you shouldn't use margins to center the element, you should use text-align to center what's inside it:
#innerprjctwrap {
text-align: center;
}
Add a width for #innerprjctwrap other ways margin:0 auto; not detected
Eg:
#innerprjctwrap {
margin:0px auto;
width:200px;
}
Using JsFiddle for explaining such problems will be much clear.
Is this fiddle what you want?
If so, then you want is actually to center elements inside #innerprjctwrap like #Guffa says, simply add:
#innerprjctwrap{
text-align:center;
}
add width. if no progress, try removing 'px'. if there's still no progress, use padding in the wrapper div.
Related
I'm searching ways to force an image element to stay always aligned at the middle of a div even when the div element gets too small to properly center the image. Here's an explanation of what I want to do: Question.jpg
I need the solution to be purely CSS if possible?
Using this centering trick should give you what you want:
img {
position:relative; (or absolute, it depends on your needs)
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
This keeps the image centered no matter the size of the container it is in. It doesn't resize the image though. Based on that pic you out it seems like you didn't want that.
Use the following grid layout and styles:
style{
.container{ max-width:800px; margin:0 auto;}
}
#media
only screen and (max-width:600px) {
.mCenter{margin:0 auto;}
.mImage600:{width:100%; height:auto;}
}
<div class=container>
<div class=mCenter>
<img class=mImage600 src 'img.jpg' width=600 >
</div>
<div>
Fiddle
img{
margin: 0 auto;
}
could help
You can do like this, using display flex.
div {
width: 100%;
height: 500px;
border: 1px solid gray;
display: flex;
align-items: flex-start;
text-align: center;
}
img {
align-self: center;
margin: 0 auto;
}
<div>
<img src="http://screenshots.en.sftcdn.net/en/scrn/323000/323026/angry-birds-theme-02-100x100.png" alt="">
</div>
JS FIDDLE Example
http://jsfiddle.net/2adv2/
Update on Vertical Align
Vertical Align works until the max-width is not reached. When the image width is at max width, and if I resize to increase the window height, the image doesn't shift to the middle of the div, but the div expands.
I am facing 2 issues
Vertical align is not happening
The image moves down a little from the div and kinda overflows when I resize the window a lot - squishing the webpage vertically.
Tell me why this happens. Also vertical align just wont work.
CSS:
#heroimg {
position:relative;
top:0%;
height:auto;
vertical-align:middle;
max-height:100%;
max-width:100%;
}
#hero {
position:relative;
top:0%;
bottom:40%;
height:40%;
text-align:center;
overflow:hidden;
background-color:yellow;
}
HTML:
<div id='hero'><img id="heroimg" src="assets/images/dfb.jpg"></div>
I'm afraid you can't use vertical-align to vertically center things in containers.
However, you can use display:table and display:table-cell with vertical-align:middle to work as you are expecting.
This requires two wrapping div tags around the image that you want to center.
The following illustrates the basic technique:
CSS:
#outer-wrapper {
display: table;
width: 100%;
}
#inner-wrapper {
display: table-cell;
vertical-align: middle;
}
img {
margin: 0 auto;
max-width: 100%;
height: auto;
}
HTML:
<div id="outer-wrapper">
<div id="inner-wrapper">
<img src="image.jpg">
</div>
</div>
See fiddle with this technique applied to your example: http://jsfiddle.net/2adv2/1/
add max-height to the #hero so the div resizes together with the img
#hero {
position:relative;
top:0%;
bottom:40%;
max-height:40%;
text-align:center;
overflow:hidden;
background-color:yellow;
}
I have a div with width:100%; since I want to fill out the parent container.
I also want to have the contents of the div in its center. I can not find a horizontal-align:center attribute for the divs. How can I configure the div so that its contents are in the center?
I.e if the div is this big:
------------------------------------------------------------------------------------------------------------
Enclosing tags here
in the center
------------------------------------------------------------------------------------------------------------
try this:
div {
margin:0 auto;
}
Try this for fixed width
div.class_name {
width: XXpx;
margin: 0 auto;
text-align: center;
}
Dynamic Height
<div class="container">
<div class="inside">some content</div>
</div>
.container
{
text-align: center;
}
.inside
{
display:inline-block;
}
In HTML
<div style="text-align: center;"> </div>
That all you need for the CSS.
Read about margin: auto trick:
http://bluerobot.com/web/css/center1.html
You could try setting:
margin: auto
I'm not sure if it helps in this case.
div.class {
margin:0 auto;
width: 800px /*as desired*/ ;
}
You must assign width to div that you will want locate to center then right and left margin should get 0 value
{
width: 100px;
margin : 0 auto;
}
This might be what you looking for: padding:0 20%; using a % helps auto adjust the padding depending on how wide the parent div is. You can change 20% to your preferred number.
.div {
width:100%;
padding: 0 20%;
}
You should try text-align:center; to make content of div in center.
i have a problem with aligning.
This is my code.
Html:
<div id="alt">
<p>this is a sample text</p>
</div>
Css:
#alt{
display:block; position: absolute; top: 400px; left:500px; }
on using code everything looks fine. But when I reduce the zoom level of the browser. Its goes to the left. I want it to remain in the centre. Help me in solving this.
For aligning website content to center,you have to put all content in one div say main div and apply a below css to it
.main
{
margin-left:auto;
margin-right:auto;
width:960px;
}
use left:50% instead of left:500px;
css:
#alt{
display:block; position: absolute; top: 400px; left:50%; }
If your container div has a fixed width then use margin: 0 auto;
Fiddle: http://jsfiddle.net/X6Vxq/show
Try the following style.
#alt
{
display:block;
text-align: center;
top: 400px;
left:500px;
}
#alt p
{
margin: 0 auto;
display: inline-block;
}
If your content is present in a div, then you can give the position relative to the div and margin left and right to auto. Check the following code:
#alt {
position: relative;
margin-left: auto;
margin-right: auto;
}
This is a hard one to answer, since you don't seem to have given us enough info. Would you like the paragraph center justified or left-justified in a centered column?
To center justify, you can simply use:
#alt { text-align: center }
To create a centered block with the text left justified, use:
#alt {
width: 800px; /* Your desired width of the center block */
margin: 0 auto;
}
Hope this helps
I am practising with making a webpage responsive for mobile screen resolutions. I succeeded with the width. How do I manage this with height? My wrappers continues to stay on top instead of vertical align.
I've seen a lot of questions about this problem, but couldn't find a solution specified on my css yet. Hope someone can help me out.
HTML
<body>
<div class="wrapper">
<div class="header">
</div>
<div class="content">
<div id="topleftbox"></div>
<div id="toprightbox"></div>
<div id="bottomleftbox"></div>
<div id="bottomrightbox"></div>
</div>
</div>
CSS
body {
}
.wrapper {
margin: 0 auto;
width: 100%;
height: 100%;
}
.header {
min-width: 50%;
height: 20px;
}
.content {
min-width: 500px;
width: 40%;
height: auto;
margin: 0 auto;
}
#topleftbox {
background: url(..);
background-repeat: no-repeat;
width: 229px;
height: 228px;
float: left;
}
#toprightbox {
background: url(...);
background-repeat: no-repeat;
width: 229px;
height: 228px;
float: right;
}
etc.
To use display:table-cell; you need to simulate the full table structure. Luckily you won't have to add any extra markup since you can style against the html and body tags:
html{display:table;width:100%;height:100%;}
body{display:table-row;}
.wrapper{
display:table-cell;
vertical-align:middle;
text-align:center;
}
Note: this vertically centers .wrapper's content, not the div itself.
You could use display:table to render your DIVs like tables and table cells.
More here: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
Unlike with centering horizontally there never has been a CSS way to center vertically. The only way is to use javascript to grab the "window.innerHeight" then add the height of the HTML element (wrapper) to it and divide the total in half. And set that as the new top position.
Also your "wrapper" has a height of 100% this should mean it fills the entire screen height. It will not center if it is the same height as the screen. Also it has a width of 100%, I doubt the "margin: 0 auto" is doing anything.
Vertical align within CSS has a few options:
1. Via table-cell. (This does work in IE8+)
{
display:table-cell;
vertical-align:middle;
}
2. line-height = height of element (If you have more than one line of text this will look funky I imagine)
{
height:10em;
line-height:10em;
}
There are more options you can find, but I believe display: table should be your best bet nowadays.
http://www.zann-marketing.com/.../vertically-centering-text-using-css.html
https://stackoverflow.com/questions/2939914/