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>
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 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.
}
I want the content to be centred in the page. However, it doesn't seem to work.
CSS:
body {
text-align: center;
}
.velkommen {
text-align: center;
font-family: Verdana;
font-size: 28px;
width: 400px;
background-color: rgb(240, 255, 240);
-webkit-box-shadow: black;
border-radius: 50px
}
#links {
font-family: Verdana;
width: 300px;
padding: 5px 20px 5px 20px;
}
HTML:
<div class="velkommen">Velkommen til min hjemmeside</div>
<div id="links">Links:<br>Random Page!</div>
Test it here: http://jsfiddle.net/URdTD/
What is wrong?
Add this style to the div:
margin-left:auto;
margin-right:auto;
To remove even one more line you could use
margin: 0 auto;
Just remember that you need to have a width on the element that you want to center.
This dosnt work if u have "float:left" to the element that you want to center.
Remember that the content should have
1)margin: 0 auto;
2)width: some px;
3)no floats
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>