I have two hr tags and i am trying to take them near each other but they go under each other what should i do for this
here are my codes
html
<hr style="margin-right: 2%;width:70%;border-width:2px;border-color:black;border-radius:4px;">
there are two of these hr tags this is the second one
<hr style="margin-right: 2%;width: 2%;border-width:2px;border-color:black;border-radius:4px;">
now what should i do to these lines go near each other like this
Just make them display: inline-block
hr {
display: inline-block;
width: 30%;
}
https://codepen.io/alexmoronto/pen/aaboNj
You can give border bottom for both div's. Try to avoid hr tag. If you need that hr tag then use bootstrap column method. it will be essay
Assign the width for big and small lines in their class respectively.
.line-container {
width: 100%;
height: 4px;
}
.line {
background-color: #000;
height: 100%;
display: inline-block;
}
.big {
width: 85%;
float: left;
}
.small {
width: 10%;
float: right;
}
<div class="line-container">
<span class="line big"></span>
<span class="line small"></span>
</div>
Use display:flex and instead hr use div and in style use border and margin
.wrap{
display:flex
}
.line{
border-bottom:1px solid black;
width:50%;
margin:5px;
}
<div class="wrap">
<div class="line"></div>
<div class="line"></div>
</div>
Or use display:inline-block; to hr and set width and margin
hr{
display:inline-block;
margin:5px;
width:45%;
}
<hr/>
<hr/>
Stuck on a problem where when I enter text in a div with display property set to inline-block. Here's the HTML:
<div class="row" id="section">
<div class="sectionheading">
</div>
<div class="sectionheading">
</div>
<div class="sectionheading">
</div>
<div class="sectionheading" id="sectionheading">
<span>Text</span>
</div>
</div>
CSS:
.sectionheading {
display: inline-block;
width: 6px;
background-color: #df5e5e;
height:35px;
}
#sectionheading {
width: 150px !important;
}
#section {
margin-left:10px;
margin-top: 40px;
}
The problem is with the div having id 'sectionheading'. When I have text in it like in the HTML given it shifts downwards for some reason, however when the div is empty it is aligned properly with the other divs. What's the problem here?
Use vertical-align: top; will solve your issue.
If you are using display: inline-block; you need to set vertical:align property of the div. Because default it's vertical-align value is baseline.
.sectionheading {
background-color: #df5e5e;
display: inline-block;
height: 35px;
vertical-align: top;
width: 6px;
}
Check Fiddle Here.
Try like this: Demo
.sectionheading {
vertical-align:top;
}
Another option for solve this issue..
.sectionheading {
display: inline-block;
width: 6px;
background-color: #df5e5e;
height:35px;
float: left;
margin-right:10px;
}
#sectionheading {
width: 150px !important;
}
#section {
margin-left:10px;
margin-top: 40px;
}
<div class="row" id="section">
<div class="sectionheading">
</div>
<div class="sectionheading">
</div>
<div class="sectionheading">
</div>
<div class="sectionheading" id="sectionheading">
<span>Text</span>
</div>
</div>
The reason why such happens when there is text is because there is a height given by default and with no proper padding height added. You can either add vertical-align: top; or add line-height: 24px; and remove height.
Fiddle : Example
I'm creating a contact card style layout, with a photo and text next to it, as demonstrated in this fiddle here:
http://jsfiddle.net/L7pWv/5/
HTML:
<div class="container">
<div class="contact-card">
<div class="photo"></div>
<div class="details">
<span class="name">My Name</span>
<span class="description">This is some really long text that should wrap nicely when things all work OK</span>
</div>
<div class="clearfix"></div>
</div>
<div class="contact-card">
<div class="photo"></div>
<div class="details">
<span class="name">My Name 2</span>
<span class="description">Short description</span>
</div>
<div class="clearfix"></div>
</div>
</div>
CSS:
.container {
width: 350px;
}
.contact-card {
background-color: whitesmoke;
border-bottom: 1px solid #ddd;
white-space: nowrap;
}
.contact-card .photo {
float: left;
width: 80px;
height: 50px;
background-color: tan;
margin: 10px;
}
.contact-card .details {
display: inline-block;
margin: 10px 0;
}
.contact-card .name {
display: block;
font-weight: bold;
line-height: 1em;
}
.contact-card .description {
display: block;
font-size: 0.8em;
color: silver;
line-height: 1em;
white-space: normal;
}
.clearfix {
clear: both;
}
As you can see from running the fiddle, when the text is really long, it does wrap eventually, based upon my white-space setting, but it exceeds the size of the contact card before doing so. I could put a right margin of 90px on the "description" class to keep the text within the bounds (which works), but I can't help but feel this is wrong. I'd like it to naturally want to stay within its parent's bounds, but can't think of the best way to achieve that. Any ideas?
Consider making these changes:
.contact-card {
display: inline-block;
}
.contact-card .details {
display: block;
}
This will keep each card displaying inline while keeping the text of the card inside the block without specifying a margin.
Kind of a tricky one, as I don't know what uses you'll be putting this in, but I'd probably do it with these changes.
Get rid of
<div class="clearfix"></div>
It's not needed if you make a simple addition like:
.contact-card {
float:left;
}
Then change .contact-card .details to this:
.contact-card .details {
padding: 10px 0;
}
That should give you the "The width of the details element should really be dictated by the parent." behaviour you're after
http://jsfiddle.net/L7pWv/6/
I suggest just don't use inline-block for this. You don't want the .detail element overflow on it's parent element. Because you already floated your photo, you can just place the element next to the photo element.
Note that you should use padding when you want space inside the element and use margin when you want it outside of the element.
There is no need for white-space: nowrap; as you floated the photo.
jsFiddle
The only thing i changed is the use of padding and margin and removed the white-space .
CSS:
.contact-card .details {
display: inline-block;
margin: 10px 0;
width:70%;
}
Fiddle: http://jsfiddle.net/L7pWv/2/
I have an element that's 60px tall that has other elements like an image and a couple of spans inside of it and I'm having trouble getting them to align vertically inside the 60px high element. Here's the mockup and CSS:
<div class="member">
<img src="images/pic.png" alt="John Smiths's Profile Picture" class="pic">
<span class="name">John Smith</span>
<span class="skills">PHP, MySQL, Javascript, C#, Java</span>
</div>
#sidebar .member {
height: 60px;
margin-bottom: 10px;
vertical-align: center;
}
#sidebar .member .name {
font-size: 15px;
font-weight: bold;
}
#sidebar .member .pic {
width: 50px;
height: 50px;
border-radius: 50%;
float: left;
margin-right: 10px;
}
#sidebar .member .skills {
display: block;
font-size: 12px;
overflow: hidden;
}
I've put it up on jsfiddle: http://jsfiddle.net/CYFyx/2/
As you can see, the elements within the .member element push to the top. I need them vertically aligned like so:
Already tried vertical-align: middle; but with no luck.
You can use vertical-align: middle in td table layout only. So you have to add a div around the spans
<div class="cell">
<span class="name">John Smith</span>
<span class="skills">PHP, MySQL, Javascript, C#, Java</span>
</div>
with this properties
#sidebar .member .cell {
display: table-cell;
vertical-align: middle;
height: 50px;
}
You can test it here: http://jsfiddle.net/Tn2RU/
Try putting them all in a div that you can vertically align using
position:relative;
margin-top: auto;
margin-bottom: auto;
height: XXpx;
You need to set the width of a parent element and width of your children so they must go into next line.
The other posibility would be to set your parent element to position:relative and then use position:absolute on all children and simply, precisely position them with top:20px; , then next one top:40px; etc etc.
With this second solution you can get exact pixel positioning of all children elements.
That shall positively give you best results.
You could also put them into a div and add padding to the top.
HTML
<div id="block">
<span class="name">John Smith</span>
<span class="skills">PHP, MySQL, Javascript, C#, Java</span>
</div>
CSS
#block {
padding-top:5px;
}
jsFiddle
I have a problem when I try to center the div block "products" because I don't know in advance the div width. Anybody have a solution?
Update: The problem I have is I don't know how many products I'll display, I can have 1, 2 or 3 products, I can center them if it was a fixed number as I'd know the width of the parent div, I just don't know how to do it when the content is dynamic.
.product_container {
text-align: center;
height: 150px;
}
.products {
height: 140px;
text-align: center;
margin: 0 auto;
clear: ccc both;
}
.price {
margin: 6px 2px;
width: 137px;
color: #666;
font-size: 14pt;
font-style: normal;
border: 1px solid #CCC;
background-color: #EFEFEF;
}
<div class="product_container">
<div class="products" id="products">
<div id="product_15">
<img src="/images/ecommerce/card_default.png">
<div class="price">R$ 0,01</div>
</div>
<div id="product_15">
<img src="/images/ecommerce/card_default.png">
<div class="price">R$ 0,01</div>
</div>
<div id="product_15">
<img src="/images/ecommerce/card_default.png">
<div class="price">R$ 0,01</div>
</div>
</div>
</div>
Update 27 Feb 2015: My original answer keeps getting voted up, but now I normally use #bobince's approach instead.
.child { /* This is the item to center... */
display: inline-block;
}
.parent { /* ...and this is its parent container. */
text-align: center;
}
My original post for historical purposes:
You might want to try this approach.
<div class="product_container">
<div class="outer-center">
<div class="product inner-center">
</div>
</div>
<div class="clear"/>
</div>
Here's the matching style:
.outer-center {
float: right;
right: 50%;
position: relative;
}
.inner-center {
float: right;
right: -50%;
position: relative;
}
.clear {
clear: both;
}
JSFiddle
The idea here is that you contain the content you want to center in two divs, an outer one and an inner one. You float both divs so that their widths automatically shrink to fit your content. Next, you relatively position the outer div with it's right edge in the center of the container. Lastly, you relatively position the inner div the opposite direction by half of its own width (actually the outer div's width, but they are the same). Ultimately that centers the content in whatever container it's in.
You may need that empty div at the end if you depend on your "product" content to size the height for the "product_container".
An element with ‘display: block’ (as div is by default) has a width determined by the width of its container. You can't make a block's width dependent on the width of its contents (shrink-to-fit).
(Except for blocks that are ‘float: left/right’ in CSS 2.1, but that's no use for centering.)
You could set the ‘display’ property to ‘inline-block’ to turn a block into a shrink-to-fit object that can be controlled by its parent's text-align property, but browser support is spotty. You can mostly get away with it by using hacks (eg. see -moz-inline-stack) if you want to go that way.
The other way to go is tables. This can be necessary when you have columns whose width really can't be known in advance. I can't really tell what you're trying to do from the example code — there's nothing obvious in there that would need a shrink-to-fit block — but a list of products could possibly be considered tabular.
[PS. never use ‘pt’ for font sizes on the web. ‘px’ is more reliable if you really need fixed size text, otherwise relative units like ‘%’ are better. And “clear: ccc both” — a typo?]
.center{
text-align:center;
}
.center > div{ /* N.B. child combinators don't work in IE6 or less */
display:inline-block;
}
JSFiddle
Most browsers support the display: table; CSS rule. This is a good trick to center a div in a container without adding extra HTML nor applying constraining styles to the container (like text-align: center; which would center all other inline content in the container), while keeping dynamic width for the contained div:
HTML:
<div class="container">
<div class="centered">This content is centered</div>
</div>
CSS:
.centered { display: table; margin: 0 auto; }
.container {
background-color: green;
}
.centered {
display: table;
margin: 0 auto;
background-color: red;
}
<div class="container">
<div class="centered">This content is centered</div>
</div>
Update (2015-03-09):
The proper way to do this today is actually to use flexbox rules. Browser support is a little bit more restricted (CSS table support vs flexbox support) but this method also allows many other things, and is a dedicated CSS rule for this type of behavior:
HTML:
<div class="container">
<div class="centered">This content is centered</div>
</div>
CSS:
.container {
display: flex;
flex-direction: column; /* put this if you want to stack elements vertically */
}
.centered { margin: 0 auto; }
.container {
display: flex;
flex-direction: column; /* put this if you want to stack elements vertically */
background-color: green;
}
.centered {
margin: 0 auto;
background-color: red;
}
<div class="container">
<div class="centered">This content is centered</div>
</div>
six ways to skin that cat:
Button one: anything of type display: block will assume the full parents width. (unless combined with float or a display: flex parent). True. Bad example.
Button 2: going for display: inline-block will lead to automatic (rather than full) width. You can then center using text-align: center on the wrapping block. Probably the easiest, and most widely compatible, even with ‘vintage’ browsers...
.wrapTwo
text-align: center;
.two
display: inline-block; // instantly shrinks width
Button 3:
No need to put anything on the wrap. So perhaps this is the most elegant solution. Also works vertically. (Browser support for transtlate is good enough (≥IE9) these days...).
position: relative;
display: inline-block; // instantly shrinks width
left: 50%;
transform: translateX(-50%);
Btw: Also a great way for vertically centering blocks of unknown height (in connection with absolute positioning).
Button 4:
Absolute positioning. Just make sure to reserve enough height in the wrapper, since noone else will (neither clearfix nor implicit...)
.four
position absolute
top 0
left 50%
transform translateX(-50%)
.wrapFour
position relative // otherwise, absolute positioning will be relative to page!
height 50px // ensure height
background lightgreen // just a marker
Button 5:
float (which brings also block-level elements to dynamic width) and a relative shift. Although I've never seen this in the wild. Perhaps there are disadvantages...
.wrapFive
&:after // aka 'clearfix'
content ''
display table
clear both
.five
float left
position relative
left 50%
transform translateX(-50%)
Update: Button 6:
And nowadays, you could also use flex-box. Note, that styles apply to the wrapper of the centered object.
.wrapSix
display: flex
justify-content: center
→ full source code (stylus syntax)
I found a more elegant solution, combining "inline-block" to avoid using float and the hacky clear:both. It still requires nested divs tho, which isnt very semantic but it just works...
div.outer{
display:inline-block;
position:relative;
left:50%;
}
div.inner{
position:relative;
left:-50%;
}
Hope it helps!
<div class="outer">
<div class="target">
<div class="filler">
</div>
</div>
</div>
.outer{
width:100%;
height: 100px;
}
.target{
position: absolute;
width: auto;
height: 100px;
left: 50%;
transform: translateX(-50%);
}
.filler{
position:relative;
width:150px;
height:20px;
}
If the target element is absolutely positioned, you can center it by moving it 50% in one direction (left: 50%) and then transforming it 50% in the opposition direction (transform:translateX(-50%)). This works without defining the target element's width (or with width:auto). The parent element's position can be static, absolute, relative, or fixed.
By default, div elements are displayed as block elements, so they have 100% width, making centering them meaningless. As suggested by Arief, you must specify a width and you can then use auto when specifying margin in order to center a div.
Alternatively, you could also force display: inline, but then you'd have something that pretty much behaves like a span instead of a div, so that doesn't make a lot of sense.
This will center an element such as an Ordered List, or Unordered List, or any element.
Just wrap it with a Div with the class of outerElement and give the inner element the class of innerElement.
The outerelement class accounts for IE, old Mozilla, and most newer browsers.
.outerElement {
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
zoom: 1;
position: relative;
left: 50%;
}
.innerElement {
position: relative;
left: -50%;
}
use css3 flexbox with justify-content:center;
<div class="row">
<div class="col" style="background:red;">content1</div>
<div class="col" style="">content2</div>
</div>
.row {
display: flex; /* equal height of the children */
height:100px;
border:1px solid red;
width: 400px;
justify-content:center;
}
Slight variation on Mike M. Lin's answer
If you add overflow: auto; ( or hidden ) to div.product_container, then you don't need div.clear.
This is derived from this article -> http://www.quirksmode.org/css/clearing.html
Here is modified HTML:
<div class="product_container">
<div class="outer-center">
<div class="product inner-center">
</div>
</div>
</div>
And here is modified CSS:
.product_container {
overflow: auto;
/* width property only required if you want to support IE6 */
width: 100%;
}
.outer-center {
float: right;
right: 50%;
position: relative;
}
.inner-center {
float: right;
right: -50%;
position: relative;
}
The reason, why it's better without div.clear (apart that it feels wrong to have an empty element) is Firefox'es overzealous margin assignment.
If, for example, you have this html:
<div class="product_container">
<div class="outer-center">
<div class="product inner-center">
</div>
</div>
<div style="clear: both;"></div>
</div>
<p style="margin-top: 11px;">Some text</p>
then, in Firefox (8.0 at the point of writing), you will see 11px margin before product_container. What's worse, is that you will get a vertical scroll bar for the whole page, even if the content fits nicely into the screen dimensions.
Try this new css and markup
Here is modified HTML:
<div class="product_container">
<div class="products" id="products">
<div id="product_15" class="products_box">
<img src="/images/ecommerce/card_default.png">
<div class="price">R$ 0,01</div>
</div>
<div id="product_15" class="products_box">
<img src="/images/ecommerce/card_default.png">
<div class="price">R$ 0,01</div>
</div>
<div id="product_15" class="products_box">
<img src="/images/ecommerce/card_default.png">
<div class="price">R$ 0,01</div>
</div>
</div>
And here is modified CSS:
<pre>
.product_container
{
text-align: center;
height: 150px;
}
.products {
left: 50%;
height:35px;
float:left;
position: relative;
margin: 0 auto;
width:auto;
}
.products .products_box
{
width:auto;
height:auto;
float:left;
right: 50%;
position: relative;
}
.price {
margin: 6px 2px;
width: 137px;
color: #666;
font-size: 14pt;
font-style: normal;
border: 1px solid #CCC;
background-color: #EFEFEF;
}
<div class="product_container">
<div class="outer-center">
<div class="product inner-center">
</div>
</div>
<div class="clear"></div>
</div>
.outer-center
{
float: right;
right: 50%;
position: relative;
}
.inner-center
{
float: right;
right: -50%;
position: relative;
}
.clear
{
clear: both;
}
.product_container
{
overflow:hidden;
}
If you dont provide "overflow:hidden" for ".product_container" the "outer-center" div will overlap other nearby contents to the right of it. Any links or buttons to the right of "outer-center" wont work. Try background color for "outer-center" to understand the need of "overflow :hidden"
I found interesting solution, I was making slider and had to center slide controls and I did this and works fine. You can also add relative position to parent and move child position vertical. Take a look http://jsfiddle.net/bergb/6DvJz/
CSS:
#parent{
width:600px;
height:400px;
background:#ffcc00;
text-align:center;
}
#child{
display:inline-block;
margin:0 auto;
background:#fff;
}
HTML:
<div id="parent">
<div id="child">voila</div>
</div>
Do display:table; and set margin to auto
Important bit of code:
.relatedProducts {
display: table;
margin-left: auto;
margin-right: auto;
}
No matter how many elements you got now it will auto align in center
Example in code snippet:
.relatedProducts {
display: table;
margin-left: auto;
margin-right: auto;
}
a {
text-decoration:none;
}
<div class="row relatedProducts">
<div class="homeContentTitle" style="margin: 100px auto 35px; width: 250px">Similar Products</div>
test1
test2
test3
</div>
I'm afraid the only way to do this without explicitly specifying the width is to use (gasp) tables.
Crappy fix, but it does work...
CSS:
#mainContent {
position:absolute;
width:600px;
background:#FFFF99;
}
#sidebar {
float:left;
margin-left:610px;
max-width:300;
background:#FFCCCC;
}
#sidebar{
text-align:center;
}
HTML:
<center>
<table border="0" cellspacing="0">
<tr>
<td>
<div id="mainContent">
1<br/>
<br/>
123<br/>
123<br/>
123<br/>
</div><div id="sidebar"><br/>
</div></td>
</tr>
</table>
</center>
Simple fix that works in old browsers (but does use tables, and requires a height to be set):
<div style="width:100%;height:40px;position:absolute;top:50%;margin-top:-20px;">
<table style="width:100%"><tr><td align="center">
In the middle
</td></tr></table>
</div>
<style type="text/css">
.container_box{
text-align:center
}
.content{
padding:10px;
background:#ff0000;
color:#ffffff;
}
use span istead of the inner divs
<div class="container_box">
<span class="content">Hello</span>
</div>
I know this question is old, but I'm taking a crack at it. Very similar to bobince's answer but with working code example.
Make each product an inline-block. Center the contents of the container. Done.
http://jsfiddle.net/rgbk/6Z2Re/
<style>
.products{
text-align:center;
}
.product{
display:inline-block;
text-align:left;
background-image: url('http://www.color.co.uk/wp-content/uploads/2013/11/New_Product.jpg');
background-size:25px;
padding-left:25px;
background-position:0 50%;
background-repeat:no-repeat;
}
.price {
margin: 6px 2px;
width: 137px;
color: #666;
font-size: 14pt;
font-style: normal;
border: 1px solid #CCC;
background-color: #EFEFEF;
}
</style>
<div class="products">
<div class="product">
<div class="price">R$ 0,01</div>
</div>
<div class="product">
<div class="price">R$ 0,01</div>
</div>
<div class="product">
<div class="price">R$ 0,01</div>
</div>
<div class="product">
<div class="price">R$ 0,01</div>
</div>
<div class="product">
<div class="price">R$ 0,01</div>
</div>
<div class="product">
<div class="price">R$ 0,01</div>
</div>
</div>
See also: Center inline-blocks with dynamic width in CSS
This is one way to center anything within a div not know the inner width of the elements.
#product_15{
position: relative;
margin: 0 auto;
display: table;
}
.price, img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
my solution was:
.parent {
display: flex;
flex-wrap: wrap;
}
.product {
width: 240px;
margin-left: auto;
height: 127px;
margin-right: auto;
}
add this css to your product_container class
margin: 0px auto;
padding: 0px;
border:0;
width: 700px;