So, on my website I'm trying to make this here http://prntscr.com/vk3cv.
The text, as you can see, isn't centered. I have the following code in my HTML
http://prntscr.com/vk3iy, and this in my CSS prntscr.com/vk3ml.
But, it doesn't seem to center it. I have had a friend help me out with that code.
The code I had before made it was just aligned to the left. I was wondering how would I make it so that it is completely centered?
In the code I had before, the html was changed from DIV class="row"
to DIV class="row feature"
And in CSS I didn't have that feature thing added.
The basic options
Give the container a fixed width and margin:0 auto;
Put the container in an HTML table cell (or a similar set of nested divs using CSS tables) and give the table cell text-align:center;
Use JavaScript or jQuery
If the container has a variable width, then you'll need #2 or #3.
If you decide on #2, it's more semantically-correct to use CSS tables in this case (favor HTML tables for data grids, and CSS tables for layout) (see the last few paragraphs here). Both are a reasonable option. But if you need support for IE7 or earlier, then you'll have to use HTML tables.
Auto margin
.feature {
width: 600px;
margin: 0 auto;
}
.feature .3u {
width: 200px;
}
CSS table
<div class="table">
<div class="row">
<div class="cell">Content goes here</div>
</div>
</div>
...
.table {display: table;}
.row {display: table-row;}
.cell {display: table-cell; text-align: center;}
.feature {display: inline-block; text-align: left; width: auto;}
You can use text-align: center; in the stylesheet in the div that is used to hold the text, to center the text.
Related
I'm trying to vertically align using the table/table-cell method.
JSFiddle
<div class="row">
<div class="small-6 columns valign">vertically align me</div>
<div class="small-6 columns"><p>content</p>.....</div>
</div>
.row{
display: table;
}
.valign{
display: table-cell;
vertical-align: middle;
background: grey;
height: 100%;
}
But it's not working, where am I going wrong? I suspect it is something to do with the height of the valign column. How can I get this to stretch to the height of it's parent?
I should also mention in my actual code I have the code nested quite deep in the page, so it's inside article and section tag and another div too.
On some browsers CSS property float does not work with display: table-cell so you should set float: none to table-cell elements in order to make them act like table cells
https://jsfiddle.net/zac926wL/5/
I'm creating a userstyle for a website, so I can't change any HTML, just pure CSS.
<div class="container"></div>
<divs>
<h2s>
<uls>
<forms>
<h3></h3>
<p></p>
</div>
I want to make h3 and p be next to each other and in the horizontal center of the container. So, I gave both of them display:inline-block and text-align:center. That made them be next to each, but not horizonatly centered. text-align:center only works if it is applied to the container, but that would be centering all the text of the other elements of the entire site.
I'm relatively new to CSS and I've searched for a way to do this, but with no avail.
If you are okay with adding a new div you can try,
HTML
<div class = "container">
<div class = "side_center">
<h3>h3 element</h3>
<p> p element </p>
</div>
</div>
CSS
h3, p {
display: inline-block;
}
.side_center {
margin: 0px auto;
display: table;
}
However I reccomend that you style commonly used elements by adding a separate class or ID as not doing so may affect other h3 and p tags in your page. Here is the bin.
NEW EDIT
h3 {
text-align: center;
margin-left: -253px;
}
p {
margin-top: -22px;
margin-right: -189px;
text-align: center;
}
PS : this is in relation to your link only.
Try posting your code into a jsfiddle.
As far as i can understand, maybe only adding a margin on the h3 and p tags will be enough?
margin:0 auto;
If you use display:inline-block; you don't have to use any float attribute.
I'm guessing you mean that the text-align:center; made them centered horizontally. If you want them to be centered vertically you could use vertical-align:middle;
I have a really simple example which I've written on JSBin. It looks like this:
All I'd like to do is simply take two divs of a given width and height and display them side-by-side without a gap between them. I've used display: inline-block to accomplish the above, but it seems like it refuses to chomp the whitespace between divs, which seems to completely violate the idea of the separation of content and styling.
Here's my HTML:
<div class="container">
<div class="a">
<!-- completely empty -->
</div>
<div class="b">
<!-- nothing at all -->
</div>
</div>
and here's my CSS:
.container {
display: inline-block;
}
.a {
width: 320px;
height: 240px;
display: inline-block;
background-color: #83C5D1;
}
.b {
width: 180px;
height: 240px;
display: inline-block;
background-color: #B2D9D6;
}
How can I work around this to get them snug together without touching my HTML?
Add float:left to both of the divs classes .a and .b
I upated your JSBin http://jsbin.com/iwihox/4/edit
You're using a tabular design. Go for broke!
.container {
display: table-row;
}
.container > * {
display: table-cell;
}
Edit: Firefox did not like the inline-block children.
QUICK FIX
All given answers are good solutions, however the main reason for the gap is that there is white-space characters in your actual HTML that gets rendered. If you remove the space between both divs:
..</div><div>..
That will fix your current problem.
Heres the JSBIN: http://jsbin.com/iwihox/10/edit
THE PROPER SOLUTION:
The proper way to do this, is add float:left to both classes .a and .b. Making them float does change the box-model, so depending on your surrounding markup, you will need to add clear:both to the next tag in your HTML to have the document properly flowing.
CHECK THIS FIDDLE: http://jsbin.com/iwihox/19/edit
Let me know, Thanks!
I am trying to create something like a gallery that shows different number of images per row based on the width of the browser. This has already been achieved using overflow: hidden in the outer div and float: left in the inner div.
However, what happens with this is that my images are always aligned to the left, leaving alot of whitespace on the right. How do I make it such that the gallery is always centered in the screen no matter how many images there are per row.
My code is on http://codepen.io/anon/pen/KzqAs
Thank you very much. :)
How about this: http://codepen.io/anon/full/mtBbF
HTML
<div class="container">
<div class="red box">red</div>
<div class="blue box">blue</div>
<div class="black box">black</div>
</div>
CSS
body{
text-align:center; /*You would need to define this in a parent of .container*/
}
.container{
display: inline-block;
margin: 0 auto;
text-align: left;
}
.box {
width: 300px;
height: 300px;
float: left;
}
Demonstration
You need to use an id(or class) on the main div. Set width: 300+px and margin: auto
Also your boxes should be with display: inline-block to allow them to begave "inline"
I have changed colors of the boxes a bit for better visibility.
My only problem is making them line up three-across and have equal spacing. Apparently, spans can not have width and divs (and spans with display:block) don't appear horizontally next to each other. Suggestions?
<div style='width:30%; text-align:center; float:left; clear:both;'> Is what I have now.
You can use divs with the float: left; attribute which will make them appear horizontally next to each other, but then you may need to use clearing on the following elements to make sure they don't overlap.
You can use
.floatybox {
display: inline-block;
width: 123px;
}
If you only need to support browsers that have support for inline blocks. Inline blocks can have width, but are inline, like button elements.
Oh, and you might wnat to add vertical-align: top on the elements to make sure things line up
My answer:
<style>
#whatever div {
display: inline;
margin: 0 1em 0 1em;
width: 30%;
}
</style>
<div id="whatever">
<div>content</div>
<div>content</div>
<div>content</div>
</div>
Why?
Technically, a Span is an inline element, however it can have width, you just need to set their display property to block first. However, in this context, a div is probably more appropriate, as I'm guessing you want to fill these divs with content.
One thing you definitely don't want to do is have clear:both set on the divs. Setting it like that will mean that the browser will not allow any elements to sit on the same line as them. The result, your elements will stack up.
Note, the use of display:inline. This deals with the ie6 margin-doubling bug. You could tackle this in other ways if necessary, for example conditional stylesheets.
I've added a wrapper (#whatever) as I'm guessing these won't be the only elements on page, so you'll almost certainly need to segregate them from the other page elements.
Anyway, I hope that's helpful.
you can do:
<div style="float: left;"></div>
or
<div style="display: inline;"></div>
Either one will cause the divs to tile horizontally.
I would do it something like this as it gives you 3 even sized columns, even spacing and (even) scales. Note: This is not tested so it might need tweaking for older browsers.
<style>
html, body {
margin: 0;
padding: 0;
}
.content {
float: left;
width: 30%;
border:none;
}
.rightcontent {
float: right;
width: 30%;
border:none
}
.hspacer {
width:5%;
float:left;
}
.clear {
clear:both;
}
</style>
<div class="content">content</div>
<div class="hspacer"> </div>
<div class="content">content</div>
<div class="hspacer"> </div>
<div class="rightcontent">content</div>
<div class="clear"></div>
I would use:
<style>
.all {
display: table;
}
.maincontent {
float: left;
width: 60%;
}
.sidebox {
float: right;
width: 30%;
}
<div class="all">
<div class="maincontent">
MainContent
</div>
<div class="sidebox">
SideboxContent
</div>
</div>
It's the first time I use this 'code tool' from overflow... but shoul do it by now...
What you might like to do is look up CSS grid based layouts. This layout method involves specifying some CSS classes to align the page contents to a grid structure. It's more closely related to print-bsed layout than web-based, but it's a technique used on a lot of websites to layout the content into a structure without having to resort to tables.
Try this for starters from Smashing Magazine.
Look at the css Float property. http://w3schools.com/css/pr_class_float.asp
It works with block elements like div. Alternatively, what are you trying to display, tables aren't evil if you're really trying to show a table of some information.
I would try to give them all display: block; attribute and using float: left;.
You can then set width and/or height as you like. You can even specify some vertical-alignment rules.
<!-- CSS -->
<style rel="stylesheet" type="text/css">
.all { display: table; }
.menu { float: left; width: 30%; }
.content { margin-left: 35%; }
</style>
<!-- HTML -->
<div class="all">
<div class="menu">Menu</div>
<div class="content">Content</div>
</div>
another...
try to use float: left; or right;, change the width for other values... it shoul work... also note that the 10% that arent used by the div its betwen them... sorry for bad english :)