How do I center the content without the use of text-align:center;? My code below: The code below does not center the content. Thank you for your time.
<div class="feat_wrapper">
<div class="product_image">
<img src="landing_product.png" alt="sweater">
</div>
<div class="content">
CITY SCAPE <br>SHIRTS
</div>
</div>
.feat_wrapper{
margin-left:auto;
margin-right: auto;
}
.feat_wrapper{
width:20%;
margin:0 auto;
}
<div class="feat_wrapper">
<div class="product_image">
<img src="landing_product.png" alt="sweater">
</div>
<div class="content">
CITY SCAPE <br>SHIRTS
</div>
</div>
(only changes were in css)
I'm assuming you meant horizontally center, but if you meant vertically as well, please comment, and I will assist with that as well.
you should add the width element of the div
for example:
.feat_wrapper{
width:600px;
margin-left:auto;
margin-right: auto;
}
Related
I want my display to look like this.
But instead, it looks like this
My Code goes like this.
HTML
<body>
<div class="top">
<div class="left">
<h1>TOP LEFT</h1>
</div>
<div class="right">
<h1>TOP RIGHT</h1>
</div>
</div>
<div class="bottom">
<h1>BOTTOM</h1>
</div>
</body>
CSS
body{
text-align:center
}
.top{
position:relative;
}
.left{
position:absolute;
width:50%;
}
.right{
position:absolute;
width:50%;
left:50%;
}
.bottom{
position:relative;
}
What necessary changes should I make in my code. I want to keep things dynamic and not specify the height of divs in pixels.
Don't. Positioning is unsuited to this type of layout.
Use the right tool for the job. Use flexbox to put the two elements side-by-side, and let normal flow handle the rest.
h1 {
text-align: center;
}
.top {
display: flex;
}
.top>div {
flex: 0 0 50%;
}
<div class="top">
<div class="left">
<h1>TOP LEFT</h1>
</div>
<div class="right">
<h1>TOP RIGHT</h1>
</div>
</div>
<div class="bottom">
<h1>BOTTOM</h1>
</div>
How do I format my CSS so that the text inside "header-right" should be aligned at the bottom while my image at "header-left" is aligned at the top?
Here's my html:
<div class="container">
<div class="header-left;">
<img src="img1.png">
</div>
<div class="header-right;">
<div style="float:left;">
This text should be at the bottom.
</div>
<div style="float:left;">
This text should be at the bottom also.
</div>
</div>
</div>
Thanks.:)
From your class-naming I suppose you want both texts to the right of the image, bottom-aligned with the image?
To achieve this, apply display: inline-block to all DIVs , in addition apply display: block; to the image to avoid any space at its bottom:
.header-left,
.header-right,
.header-right div {
display: inline-block;
}
.header-left img {
display: block;
}
<div class="container">
<div class="header-left">
<img src="http://placehold.it/80x120">
</div>
<div class="header-right">
<div>
This text should be at the bottom.
</div>
<div>
This text should be at the bottom also.
</div>
</div>
</div>
BTW: Don't use a semicolon in class="header-right" (inside your DIV-tags) and similar.
You can displat the .container as a table and the .header-right and .header-left as table cells. This way, you can align the contents vertical bottom (or even top or middle)
See snippet below
.container{
display:table;
}
.header-left,.header-right{
display:table-cell;
}
.header-right{
vertical-align:bottom;
}
.header-right *{
display:table-cell;
}
<div class="container">
<div class="header-left">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSYTogPdYlS2zHfImUPfjdkO1v0793TjQMD2qjLoY7qNkqCUN_-dA">
</div>
<div class="header-right">
<div style="">
This text should be at the bottom.
</div>
<div style="">
This text should be at the bottom also.
</div>
</div>
</div>
I am trying to work out the best way for me to center each of my pictures (#contact1, #contact2, #contact3) inside each of their containers. I have tried to put margin left etc but doesnt work for when I scale up.
I have a JSFiddle I have started: http://jsfiddle.net/tJugd/3592/
HTML:
<div class="slide" style="height:66px;">
<div class="staff staff-matt" data-hammer="[object Object]">
<div id="contact1"><img src="mobile_aboutus.svg" alt="About us" style="width:44px;height:auto"></div>
</div>
<div class="staff staff-shail" data-hammer="[object Object]">
<div id="contact2"><img src="mobile_aboutus.svg" alt="About us" style="width:44px;height:auto"></div>
</div>
<div class="staff staff-leah" data-hammer="[object Object]">
<div id="contact3"><img src="mobile_aboutus.svg" alt="About us" style="width:44px;height:auto"></div>
</div>
</div>
CSS: (View all on JSFiddle)
#contact1, #contact2, #contact3{
position:relative;
background-color:white;
width:100%;
height:66px;
}
You will need to make you images display block and add margin 0 auto to it
#contact1 img, #contact2 img, #contact3 img{
margin: 0px auto;
display:block;
}
Try:
margin-left: auto;
margin-right: auto;
This makes your image have an equal margin on both sides, and usually works with most divs and images.
Try with adding the attribute text-align: center; to staff class.
I have this HTML:
<div class="styles container">
<h1>Styles</h1>
</div>
<div class="preview container">
<h1>Preview</h1>
</div>
I want the first div to be static. Let's say its width is to be 265 pixels. The .preview div should be next to it, but it should be responsive (by shrinking the window this div should also shrink). I tried with setting a % to this div, but still it goes below. How can I fix this?
First of all, DIV it's block element, and starts rendering from new line. There are few techniques to change the behavior. If you don't need to support IE6/IE7 you can use inline-block CSS style, e.g:
<div>
<div style="width:20%; display: inline-block;">
<h1>1</h1>
</div>
<div style="width:70%; display: inline-block;">
<h1>2</h1>
</div>
</div>
This is your solution:
HTML:
<div class="parent">
<div class="styles">
<h1>Styles</h1>
</div>
<div class="preview">
<h1>Preview</h1>
</div>
</div>
CSS:
.parent{
width:100%;
white-space: nowrap;
}
.styles{
width:265px;
display:inline-block;
}
.preview{
width:auto;
display:inline-block;
}
Hope it will solve you problem.Check Fiddle.
I'm trying to make something like this. Any help will be greatly appreciated.
(can't paste the image due to 2 missing points of reputation ;) ) http://i.stack.imgur.com/p7xhr.jpg
I'm sorry I've given an impression like I don't know what I'm doing at all and I want someone else to do my work for me. I did try various solutions none of which seems to work.
on jfsfiddle it seems to work, but when I check on the actual site the top right image gets moved to another row
http://jsfiddle.net/37GAn/1/
html
<div>
<div class="image">
<img src="image.jpg" width="98" height="203"/>
</div>
<div class="image">
<img src="image.jpg" width="85" height="203"/>
</div>
<div class="clear"></div>
</div>
<div>
<div class="image">
<img src="image.jpg" width="130" height="210"/>
</div>
<div class="image">
<img src="image.jpg" width="69" height="197"/>
</div>
<div class="clear"></div>
</div>
css
.image {
float: left;
width: 100px;
margin-top:50px;
margin-left:280px;
}
This is just to give you a round-about idea.
You'll need your HTML as such:
<div id="contentHolder">
<div class="row">
<div>
<div class="image"></div>
<div class="textHolder">Some text here</div>
</div>
<div>
<div class="image"></div>
<div class="textHolder">Some text here</div>
</div>
</div>
<div class="row">
<div>
<div class="image"></div>
<div class="textHolder">Some text here</div>
</div>
<div>
<div class="image"></div>
<div class="textHolder">Some text here</div>
</div>
</div>
</div>
and CSS as such:
* {
margin:0;
padding:0;
}
#contentHolder {
background-color:Gray;
height:100%;
padding:40px 10px;
}
.row {
height:250px;
width:100%;
margin-bottom:30px;
}
.row > div {
display:inline-block;
width:48%;
height:inherit;
vertical-align:top;
}
.image {
background:white url(http://cdn.sstatic.net/stackoverflowmeta/img/apple-touch-icon.png) no-repeat 0px 0px scroll;
height:160px;
width:70%;
margin:20px auto;
border-radius:10px;
}
.textHolder {
color:White;
width:50%;
height:20px;
margin:0 auto;
}
This should work for you. This may still need some work as I have not tried to make it inch-perfect. That I'll leave it to you!!! :)
You can see that here:http://jsfiddle.net/a7zLW/
Hope this helps!!!