Basically I want to put the div tags below in the center of the page. How is this done in CSS? I am having such a hard time doing it what is the best option!?
HTML
<div class="tab-selected" id="search">Search</div>
<div class="tab-unselected" id="search">Tags</div>
<div class="tab-unselected" id="search">Recruiters</div>
CSS:
.tab-selected {
background: #FF00FF;
-moz-border-radius: 3px;
border-radius: 3px;
font: 13px helvetica;
color: #FFFFFF;
height: 15px;
display: inline;
}
.tab-unselected {
-moz-border-radius: 3px;
border-radius: 3px;
font: 13px helvetica;
color: #585858;
height: 15px;
display: inline;
margin: 5px 5px 5px 5px;
padding: 5px 5px 5px 5px;
position: relative;
width: 60px;
display: inline-block;
horizontal-align: center;
}
Wrap the class .tab-unselected in a seperate div whose properties would be -
.center { margin: 0 auto; float: none; }
Now -
<div class="center">
<div class="tab-selected" id="search">Search</div>
<div class="tab-unselected" id="search">Tags</div>
<div class="tab-unselected" id="search">Recruiters</div>
</div>
horizontal-align does not exist. Use text-align: center instead. To horizontally center the element itself, use margin: 0 auto;, which equals:
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin:left: auto;
The automatic right and left margin results in a centered element.
If you want to vertically align an element, use vertical-align: center (this does only work on inline elements).
Wrap them in a <div style="text-align: center;"> (or use some other way to apply that style to a containing element).
Wrap them in a div
#center {
margin: 0 auto 0 auto; }
Then apply
<div id="center"> <YOURSTUFF HERE> </div>
Related
It creates exactly what I need but I cannot center to whole element on the page. centering will only center the text within the background colored area. What am I doing wrong?
I tried many different code combination but cannot make this work.
GROW YOUR BUSINESS WITH US
<h1 style="display: inline-block; text-align: center; background-color: #273b86; color: #ffffff; padding: 5px; border-radius: 5px; width: 640px;">GROW YOUR BUSINESS WITH US</h1>
I would like whole element above to be centered on the page.
You also could just change the display attr to block and add margin:auto to it!
I placed it into a div with 1000px width for you to view, but you just need the h1
<div style="width:1000px;">
<h1 style="display: block; text-align: center; background-color: #273b86; color: #ffffff; padding: 5px; border-radius: 5px; width: 640px; margin:auto;">GROW YOUR BUSINESS WITH US</h1>
</div>
You can add div around H1 and add width and margin:auto like
<div style="width:650px; margin: auto;"><h1 style="display: inline-block; text-align: center; background-color: #273b86; color: #ffffff; padding: 5px; border-radius: 5px; width: 640px; ">GROW YOUR BUSINESS WITH US</h1><div>
Or like Huangism do
<h1 style="text-align: center; background-color: #273b86; color: #ffffff; padding: 5px; border-radius: 5px; width: 640px; margin: auto;">GROW YOUR BUSINESS WITH US</h1>
here is an example
.container{
width: 100%;
height: 100%;
border: 1px red solid;
display: inline-block;
height: 90vw;
}
.container > div{
width: 150px; /* very impotent */
margin:auto;/* center position */
border:1px #CCC solid;
text-align:center;
}
<div class="container">
<div> center div </div>
</div>
I have two inline elements within a div. One element is floated to the left and the other to the right. I have used absolute positioning to place the block containing inline elements at the bottom of a DIV.
Problem: The element floating to the right skews out of its container. How can I fix this so that it stays within its container? Here is the CodePen.
HTML
<div class="posts__post">
<article>
<a class="posts__post--preview" href=""><img src="http://lorempixel.com/470/310/food" /></a>
<a class="posts__post--title" href=""><h1>Bryce Canyon A Stunning U.S Travel Destination</h1></a>
<div class="posts__post--meta">
<a class="posts__post__timestamp"><i class="fa fa-clock-o" aria-hidden="true"></i>10 days ago</a>
<a class="posts__post__tag">Motivation</a> <!-- element floating out --->
</div>
</article>
</div>
SCSS
.posts__post{
height: 400px;
width: 310px;
margin: 40px auto;
//margin-bottom: 40px;
position: relative;
text-align: left;
background-color: white;
border-radius: 5px 5px 5px 5px;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.15);
.posts__post--preview img{
width: 100%;
height: auto;
border-radius: 5px 5px 0px 0px;
}
.posts__post--tag{
font-size: em(15);
font-weight: bold;
color: $light-grey;
}
.posts__post--meta{
color: $light-grey;
position: absolute;
bottom: 25px;
left: 0;
display: block;
}
.posts__post--title, .posts__post--tag, .posts__post--meta{
margin: 0 25px;
display: inline-block;
text-docoration: none;
}
.posts__post__timestamp{
float:left;
}
.posts__post__tag{
float:right;
}
}
This is because of margin that you have given to posts__post--meta, instead of using margin use padding, and box-sizing:border-box
.posts__post--meta{
padding: 0 25px;
display: inline-block;
text-docoration: none;
width: 100%;
box-sizing: border-box;
}
For more info about box-sizing
.posts__post--meta{
color: $light-grey;
position: absolute;
bottom: 25px;
left: 0;
right:0; //add this
display: block;
}
Just to add a note I have noticed while I'm working on a php application. Using float within a <div> is overridding the whole div. to clarify my point. if you have <div class="page-wrapper"> and within it you have <div id="img-align"> and it has a float, it override the "page-wrapper" and stand alone. don't use it unless you really need it. Thanks
I created two tables using table,table-cell. But when I increase padding on first cell it also increasing padding on second cell also vice versa. What is the reason and how to solve it.
.desc-one{
width: 100%;
margin-bottom: 20px;
display: table;
}
.desc-one-one{
width: 350px;
background-color: #ffffff;
display: table-cell;
padding-right: 10px;
border-radius: 10px;
vertical-align: top;
box-shadow: 0px 2px 1px #888888;
}
.quick-heading{
font-size: 20px;
font-family: opensans-semibold;
color: #2199e8;
padding-left: 10px;
padding-top: 5px;
}
.row-two-one{
max-width: 1200px;
border-radius: 10px;
background-color: #ffffff;
box-shadow: 0px 2px 1px #888888;
}
.desc-one-two{
display: table-cell;
padding-left: 20px;
}
.recent-heading{
color: #2199e8;
font-size: 20px;
font-family: opensans-semibold;
}
<div class="desc-one">
<div class="desc-one-one">
<h1 class="quick-heading">
Quick links
</h1>
</div>
<div class="desc-one-two">
<div class="row-two-one">
<h1 class="recent-heading open-semibold">
Low Stock Distributors
</h1>
</div>
</div>
</div>
In CSS code: If I increase padding-top / padding-bottom of my first table cell heading, the second cell elements also taking the padding mentioned in first cell (vice versa)
I have tried your code and found that only the first heading gets the padding top. Maybe you have another bit of code on your page somewhere that is adding this extra padding.
.desc-one {
width: 100%;
margin-bottom: 20px;
display: table;
}
.desc-one-one {
width: 350px;
background-color: #ffffff;
display: table-cell;
padding-right: 10px;
border-radius: 10px;
vertical-align: top;
box-shadow: 0px 2px 1px #888888;
}
.quick-heading {
font-size: 20px;
font-family: opensans-semibold;
color: #2199e8;
padding-left: 10px;
padding-top: 100px;
}
.row-two-one {
max-width: 1200px;
border-radius: 10px;
background-color: #ffffff;
box-shadow: 0px 2px 1px #888888;
}
.desc-one-two {
display: table-cell;
padding-left: 20px;
}
.recent-heading {
color: #2199e8;
font-size: 20px;
font-family: opensans-semibold;
}
<div class="desc-one">
<div class="desc-one-one">
<h1 class="quick-heading">
Quick links
</h1>
</div>
<div class="desc-one-two">
<div class="row-two-one">
<h1 class="recent-heading open-semibold">
Low Stock Distributors
</h1>
</div>
</div>
</div>
Your code works just fine, as the other answers say..
However, in one comment you remark that it works the way you describe if you remove the vertical-align:top from the style of the first cell.
Then why did you have this property in there in the first place? It confuses the matter to people who want to answer.
The answer is, if you don't specify any vertical-align property, it defaults to 'baseline`. That means that both cells align their contents to one another, on the bottom of the first line of text in each of them. That's simply how table cells behave; they work together.
The solution, therefore, is to put vertical-align:top in, which causes the cells to align their contents to their tops.
How to I can I center this texts horizontally which is inside two divs. When I'm previewing it in Dreamweaver, it is finely centered.
My HTML codes:
<div class="maincontainer">
<div class="microcontainers">
<p class="design"><span style="color: #F90;">D</span>ESIGN</p>
</div>
<div class="microcontainers">
</div>
</div>
My CSS Style:
#maincontainer{
width:1120px;
height:auto;
background-color:#E4E4E4;
margin-left: auto;
margin-right: auto;
margin-top: 124px;
padding: 40px 40px 40px 40px;
overflow: hidden;
display:block;
text-align: center;
}
.microcontainers{
width: 350px;
height: 600px;
border: #999 1px solid;
margin: 40px 40px 40px 40px;
padding: 15px 15px 15px 15px;
display: inline-block;
overflow: hidden;
}
.design{
font-family: TrajanPro-Regular;
font-size:85px;
color: #999;
text-align: center;
display: block;
margin: 0 auto;
}
Thank you and more power!
v Please try this, it may solve your problem.
There is some CSS changes.
.microcontainers{
width: 350px;
height: 600px;
border: #999 1px solid;
margin: 40px 40px 40px 40px;
padding: 15px 15px 15px 15px;
display: inline-block;
overflow: hidden;
text-align: center;
position: relative;
}
.design{
font-family: TrajanPro-Regular;
font-size:85px;
color: #999;
position: absolute;
left:0;
right:0;
}
FIDDLE
Add text-align:center for the paragraph.
.design{
font-family: TrajanPro-Regular;
font-size:85px;
color: #999;
text-align:center;
}
Your content "DESIGN" seem to be overflowing its container thus placing it off-center. Look at this demo where I have added overflow: hidden to .design.
With your updated CSS, including text-align: center for .design you could either reduce the font-size, reduce the padding of .microcontainers or add negative margin on the <p> element
add
text-align:center;
in your design class
Just adding text alignment will fix it see this Fiddle
doing exactly what the above user suggested.
.design{
font-family: TrajanPro-Regular;
font-size:85px;
color: #999;
text-align: center;
}
but I don't see why you are doing this can you explain it..If you are doing a big project i suggest you use bootstrap
You can use center tags also
<div class="maincontainer">
<center><div class="microcontainers">
<p class="design"><span style="color: #F90;">D</span>ESIGN</p>
</div></center>
<center><div class="microcontainers">
</div></center>
</div>
I would like a two column layout without worrying about the background when one column happens to be tallest than the other.
I have read about faux columns, liquid layout, but I would like to ask you if it may work this way: I have a "main" element with a semi-transparent image as background (16x17px). The main element contains the 2 floating columns, the left floats left and the right one floats right.
.main {
width: 1024px;
background-image: url();
padding:10px 0px 10px 0px;
margin: 0 auto;
}
.colleft {
float: left;
width: 618px;
padding:10px 5px 10px 10px;
}
.rightbar {
margin: 0 auto;
width: 50em;
float: right;
padding:10px 5px 10px 10px;
width: 376px;
}
.titolo {
text-align: center;
font-family: ClaireHandRegular, Helvetica, sans-serif;
font-size: 30px;
color: #35231e;
line-height: 100%;
padding:10px 0px 0px 0px;
}
.contenuto {
text-align: left;
font-family: ClaireHandRegular, Helvetica, sans-serif;
font-size: 25px;
color: #35231e;
line-height: 100%;
padding:20px 0px 0px 0px;
}
There is something wrong in my HTML and I cannot see where.
Am I this far from the solution?
<div class="main">
<div class="colleft">
<div class="titolo">ARTICLES</div>
<div class="contenuto">CONTENT</div>
</div>
<div class="rightbar">
<div class="contenuto">RIGHT BAR CONTENT</div>
</div>
</div>
You may use JSFiddle or similar to test it. As well as Firebug or similar.
When you work with floats, you must contain your floats.
In order to do so, you have several techniques at your disposal.
Among them, a simple one:
overflow:hidden; your float container.
In your case, the element with class .main.
Try this:
.main {
width: 1024px;
background-image: url();
padding:10px 0px 10px 0px;
margin: 0 auto;
background-color: red; //<-- added just to test.
overflow:hidden; //<-- to contain the floats.
}