I have the following div arrangement, with the below css. Everywhere online seems to say you need margin:0 auto; for centering, but the text still goes to the top right,
Any help appreciated.
.menu_item {
margin: 0 auto;
}
<div style='position:absolute;width:110%;height:110%;left:-5%;top:-5%;background-color:white;z-index:7;overflow:none;'>
<div id='menu_but' style='width:36px;height:36px;'>
<div class='menu_line' />
<div class='menu_line' />
<div class='menu_line' />
</div>
<div id='menu'>
<div class='menu_item'>HOME</div>
<div class='menu_item'>ABOUT US</div>
<div class='menu_item'>CONTACT US</div>
<div class='menu_item'>PORTFOLIO</div>
</div>
</div>
First of all, <div> is not a self-closing tag so you have to write </div> instead of <div class='menu_line'/>
Then, you could simply do:
<style>
.menu_item{
display: inline-block;
}
#menu {
position: relative;
text-align: center;
}
</style>
<div id="menu">
<div class="menu_item">HOME</div>
<div class="menu_item">ABOUT US</div>
<div class="menu_item">CONTACT US</div>
<div class="menu_item">PORTFOLIO</div>
</div>
maybe use flexbox ?
.parent {
display:flex;
justify-content:center;
align-items:center;
}
All of the child elements will be centered
Related
See my code at codepen
I'm trying to horizontally center the circle progress bar in the page, I tried setting margin: 0 auto; on the div, it didn't work. I, also, tried setting text-align: center on the parent div and setting the div to display: inline-block, no success as well.
This is the element in the HTML I'm trying to center:
<div class="row">
<div class="clearfix">
<div class="col-md-12">
<div class="timer"> <!-- this one should be centered -->
<div class="c100 p50 big">
<span>50%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
</div>
</div>
</div>
</div>
And this is the CSS I'm applying on the element:
.col-md-12{
width: 100%;
}
.timer{
width: 100%;
margin: 0 auto;
}
Remove float: left; or set it to none in .c100 css class.
.c100 {
float:none;
}
I think it should be like this.
<center>
<div class="row">
<div class="clearfix">
<div class="col-md-12">
<div class="timer"> <!-- this one should be centered -->
<div class="c100 p50 big">
<span>50%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</center>
Replace your existing CSS rules with:
.col-md-12 {
text-align: center;
}
.timer {
display: inline-block;
}
<div class="timer"> <!-- this one should be centered -->
.timer{
width: 100%;
margin: 0 auto;
}
It is centered. It is also 100% wide, so being in the center is the same as being left or right aligned. It takes up all the space.
You need to set a smaller width in order for it to noticeably appear in the center.
Remove float: left;from .c100 class to center the div.
If that's what you wanted:
CodePen example
I added:
.timer {display: flex}
and also added a new class to it's only child
.align {margin: 0 auto !important;}
as .c100 overrides margins.
I am unable render my divs in the center of the page (horizontally). I have tried styling the CSS as "margin:auto" but still not rendering correctly.
Here is my CSS:
.pbtable
{
display:table;
margin: auto 0;
width:500px;
}
.pbrow
{
display:table-row;
}
.pbcell
{
display:table-cell;
}
Here is my html:
<body>
<?php echo $menu;?>
<br/><br/><br/>
<div class="pbdtable">
<div class="pbrow">
<div class="pbcell">
<img src="/images/forevents/mcdougall.jpg" height="200px"/>
</div>
<div class="pbcell">
<img src="/images/forevents/targetJoAnn.jpg" height="200px"/>
</div>
</div>
<div class="pbrow">
<div class="pbcell">
Dr. John McDougall
</div>
<div class="pbcell">
JoAnne Farb
</div>
</div>
</div>
</body>
The two images appear to the far left of the screen and I would like them centered.
Problem 1: wrong class name
In your CSS it is written .pbtable but in HTML it's pbdtable
Problem 2: you need the margins to be auto on the right and left sides, you wrote auto 0 instead of 0 auto.
Final correct code:
.pbtable {
display: table;
margin: 0 auto;
width: 500px;
}
.pbrow {
display: table-row;
}
.pbcell {
display: table-cell;
}
<div class="pbtable">
<div class="pbrow">
<div class="pbcell">
<img src="https://placehold.it/200/200" height="200px">
</div>
<div class="pbcell">
<img src="https://placehold.it/200/200" height="200px">
</div>
</div>
<div class="pbrow">
<div class="pbcell">
Dr. John McDougall
</div>
<div class="pbcell">
JoAnne Farb
</div>
</div>
</div>
jsFiddle: https://jsfiddle.net/azizn/Lfh0hg7o/
you need position: relative on the .pbtableelement (and also on its parent element) for margin: 0 auto to do the centering.
Addition: There were two errors in your code:
1.) It's margin: 0 auto, not margin: auto 0
2.) You had a typo in your class for the table: "pbdtable" vs. "pbtable"
Here is a codepen with the working solution: http://codepen.io/anon/pen/EKJJvz
Just align the images to the center.
.pbrow {
display: table-row;
text-align: center;
}
Fiddle
I'm trying to center a bunch of divs with a fixed size. I want it to work with a relative/unspecified window size. The code below works so long as the divs don't wrap around to the next line. As soon as they wrap, everything gets aligned to the left. The plan is to dynamically generate lots of these and have it be vertically scrollable only. My CSS skills are pretty weak. Any advice? Thanks in advance.
.container {
margin: 0 auto;
display: table;
}
.block {
background: #999;
float: left;
width: 50px;
height: 50px;
margin: 5px;
}
<html>
<head>
</head>
<body>
<div class="container">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<!--
<div class="block">5</div>
<div class="block">6</div>
<div class="block">7</div>
<div class="block">8</div>
<div class="block">9</div>
<div class="block">10</div>
<div class="block">11</div>
<div class="block">12</div>
<div class="block">13</div>
<div class="block">14</div>
<div class="block">15</div>
-->
</div>
</body>
</html>
You can use display:inline-block; instead of float:left and then give text-align:center; to their parent and don't forget to remove extra spaces which is occurred by display:inline-block;
.container {
margin: 0 auto;
display: table;
text-align:center;
}
.block {
background: #999;
/* float: left; */
display:inline-block;
width: 50px;
height: 50px;
margin: 5px;
}
<html>
<head>
</head>
<body>
<div class="container">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<div class="block">5</div>
<div class="block">6</div>
<div class="block">7</div>
<div class="block">8</div>
<div class="block">9</div>
<div class="block">10</div>
<div class="block">11</div>
<div class="block">12</div>
<div class="block">13</div>
<div class="block">14</div>
<div class="block">15</div>
</div>
</body>
</html>
I all, i've this part of code
HTML:
<div id="services"></div>
<div class="modular-row features small">
<div class="content-inner">
<h1>Für alle Ihre Werte</h1>
<div class="feature-items">
<div class="feature">
<img style="" src="/sdstest/user/pages/01.home/_01.services/icon1.png" />
<div class="feature-content icon-offset">
<h4>Rechenzentrum</h4>
</div>
</div>
<div class="feature">
<img style="" src="/sdstest/user/pages/01.home/_01.services/icon2.png" />
<div class="feature-content icon-offset">
<h4>Kollaboration</h4>
</div>
</div>
<div class="feature">
<img style="" src="/sdstest/user/pages/01.home/_01.services/icon3.png" />
<div class="feature-content icon-offset">
<h4>Archiv</h4>
</div>
</div>
<div class="feature">
<img style="" src="/sdstest/user/pages/01.home/_01.services/icon4.png" />
<div class="feature-content icon-offset">
<h4>Wertsachen</h4>
</div>
</div>
</div>
</div>
CSS:
.feature { margin-right: 2rem; }
What i need is
1: to center the class="feature" elements in the middle
2: have a bit of space between that elements (as is it now).
But this is result:
How can i solve it?
(Demo): https://jsfiddle.net/kf3u042k/
You can change css somthing like this
.modular .features .feature {
display: block;
float: left;
margin-bottom: 1rem;
margin-top: 2rem;
vertical-align: top;
width: 24%;
}
.feature {
margin-right: 15px;
}
Try to add this code into your stylesheet. .feature{
margin-left:auto;
margin-right:auto;
max-width:900px;
}
You have to fix the width and then put your side margin on auto. It would be something like this:
.feature{
max-width:900px;
margin-left:auto;
margin-right:auto;
padding-left: x px;
}
for the space just ad a padding-left on your feature (cf code). Still if your width is not large enough it will go bad
I have the following html:
<div class="wrapper">
<h1>Ipods</h1>
<div class="main-topright-bottom">
<h1>Related Products</h1>
<div>Check items to add to the cart or select all.</div>
<div class="relatedproduct">
<div class="relatedproductimage">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR-YiokcA1U38PFCbIYklGbbqu-4E7gj6p-c4txmJjZxblroYu40A" />
</div>
<div class="relatedproducttext">
<div class="relatedproductheading">A red ipod nano.</div>
<div class="price">$140.00</div>
<div class="addtowishlist">Add to Wishlist</div>
</div>
</div>
<div class="relatedproduct">
<div class="relatedproductimage">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR-YiokcA1U38PFCbIYklGbbqu-4E7gj6p-c4txmJjZxblroYu40A" />
</div>
<div class="relatedproducttext">
<div class="relatedproductheading">A blue ipod nano.</div>
<div class="price">$140.00</div>
<div class="addtowishlist">Add to Wishlist</div>
</div>
</div>
</div>
</div>
and css:
.wrapper { background: blue; }
.relatedproduct { clear: both; }
.relatedproductimage { float: left; }
.relatedproducttext { float: left; }
I want to know how come the blue background does not extend to the bottom div.
What am I doin wrong?
http://jsfiddle.net/johngoche99/C9NKP/2/
Thanks.
Floats aren't contained by default. You make it do this by floating the wrapper too, or giving it an overflow property.
.wrapper {
overflow: hidden;
}
jsfiddle demo
Read http://colinaarts.com/articles/float-containment/ for another (better) alternative if you don't want to hide overflow as a side-effect.
More information at https://developer.mozilla.org/en-US/docs/Web/CSS/Block_formatting_context
change
.wrapper { background: blue; }
To
.wrapper { background: blue;overflow:hidden;}