My dilemma is this (and should be simple, I suspect): I have a container and a set of items (both divs). The following CSS applies:
.container {
float: left;
width: 100%;
}
.item {
margin: 32px;
text-align: center;
position: relative;
float: left;
}
The .item itself is a container that could have almost any set of arbitrary elements, but they need to be center aligned inside of it (in my case, it typically contains a thumbnail image and a small caption of text beneath it). While the above CSS allows each .item to flow horizontally the way I like, I can't figure out how to make the whole set center aligned (as opposed to flowing from left to right like it does now).
edit
Change .item { display: block; } to .item { display: inline-block; }, take away .item { float:left; } and add text-align: center; to .container
You can see it here: http://jsfiddle.net/JMC_Creative/RQrRb/
You could also put an .inner div with width:75%; margin: 0 auto; and then put your .items in that, if you are looking to have some space on the sides.
You'll want to take a look at this tutorial from Mozilla. It can be center aligned by just setting the parent container to text-align:center;
Cross Browser Inline Block
.container {
width: 100%;
}
.item {
margin: 32px;
text-align: center;
}
Related
The image on my home page is left aligned.
While it looks great on desktop, it does not look good on mobile
I am trying to "center" the image defined by .entry-image.attachment-post.gsfc-alignleft on mobile views.
I have tried the following without success :
#media all and (max-width: 675px) {
.entry-image.attachment-post.gsfc-alignleft {
width: 100%!important;
max-width: none;
text-align: center;
margin-left: auto!important;
margin-right: auto!important;
}
}
My website is : parlons-survivalisme.com
What am I missing ?
You need to set the outer a Tag to width: 100% in order to align the image above the whole width.
For instance:
a.alignleft {
width: 100%;
}
As advised by Luca, changed the code to the following, which works !!
#media all and (max-width: 675px) {
a.alignleft {
width: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
}
There are 2 straightforward solutions to center an image.
The first is to set your image to 'display: inline-block' and then wrap it with an outer div where you set the 'text-align' property to center.
.wrapper-div {
width: 100%;
text-align: center
}
.img {
display: inline-block;
}
The other solution is to make sure your img is a block element (display: block) and then set the margin-right and margin-left to auto.
.img {
display: block;
margin-right: auto;
margin-left: auto;
}
If you still have a bug, look at the parent element width (to make sure it is 100% on small screens).
I have a type of navigation that is contained within a 'pill' of sorts.
I need the pill (surrounding container) to automatically resize based on the amount of elements in the navigation.
I have the pill container centered on the page, so I don't think a float: left; or float: right; will work because it will override the margin: 0 auto;.
Here is a fiddle with an example of my issue: http://jsfiddle.net/TylerB/EU6XG/1/
How can I set this div element's width based on the amount of navigation items in the list?
Simply add display: table
DEMO http://jsfiddle.net/kevinPHPkevin/EU6XG/6/
.tabset-container {
margin: 0 auto;
position: relative;
top: 25px;
z-index: 1;
background: transparent;
text-align: center;
display:table;
}
Also add overflow: hidden to the tabs so then your rounded corners still show
.tabset {
overflow:hidden;
}
I was going in jQuery direction - fiddle (get the width and pass it trough .css())
+ display: inline-block on .tabset
I am trying to center my a .img-link tag within a thumbnail but haven't had any luck.
Here is a link to an example of what I am doing http://jsfiddle.net/Dhk3M/ .
Is this possible?
Give .thumbnail text-align:center. Write like this:
.thumbnail {
text-align: center;
}
Check this http://jsfiddle.net/Dhk3M/1/
to auto center an element, it has to have a fixed width so you can apply margin-left: auto;
and margin-right: auto;
.img-link img {
width: 267px;
margin: 0 auto;
display: block;
}
this is valid if you can actually set the element width in your css, that means you know the element will always have the exact same width. alternatively:
text-align: center;
will work for inline elements (like an img tag)
I'm working on a product catalog page, and the group of images needs to be centered but I have yet to find a way to do so, since they're all floated in a div that's a 100% in width.
I'm looking for a way to center those images horizontally without losing the flexibility of their floating properties.
Here's a link to the catalog on the website: http://internetvolk.de/katalog/
try using display: inline-block; istead of floating and add text-align: center to their parent container)
Augment with the following rules:
#katalog {
text-align: center;
}
and
.imageLink {
/** float: left; <-- REMOVE! */
display: inline-block;
}
if you give #katalog a width - calculate this from the number of images and their margins. e.g.
#katalog{
width: 960px; /*just an example*/
margin: 0 auto;
}
#katalog {
margin: 10px auto 0;
overflow-y: hidden;
max-width: 940px;
min-width: 810px;
}
Use max-height and min-height to keep flexibility, I'm defining a max-width to keep it centered in all screens by adding margin: 0 auto;
I am very new to html/xml/css and I'm trying my best to teach myself. However, I have run into a problem that a Google search could not solve.
I would like to position a small image in a fixed location relative to another element(?)
I believe this is the code of the element i want to position the second element relative to.
<style type="text/css">
#wrap {
width:550px;
background-color:#fff;
margin:0 auto;
padding:0;
border-right:1px solid #ccc;
border-left:1px solid #ccc;
}
#container {
width: 500px;
margin:0 auto;
padding: 25px;
font-size:.85em;
background-color: #fff;
}
and this is partial code I'm trying to edit to position .xyz to the right of "#wrap"
.xyz {
position: ???;
top: 200px;
right: ???;
_position: ???;
_margin: ???;
_text-align: right;
z-index: 1337;
}
my search of SOF has lead me to believe i'm supposed to do something along the lines of this -
Position an HTML element relative to its container using CSS
- but i haven't been able to.
I greatly appreciate any help you may offer. Hopefully I've explained my problem properly.
If you want .xyz inside of #wrap but on the right side, doing a float:right; on your .xyz element will achieve what you want.
EDIT:
try something like this:
<div class="wrap">
<div class="shuffle"><my shuffle img></div>
......Other stuff......
</div>
then css wise:
.wrap{position:relative;overflow:visible;}
.shuffle{position:absolute;right:100px;}
Updated for modern CSS:
If you're working in one dimension, as with a phone view (where everything is basically vertical) or a navigation bar (where everything is basically horizontal), use the Flexible Box module.
Set your container to display: flex; and flex-flow: row; or column; depending on which way you're headed.
Justify-content:space-around; will space the child items evenly with roughly the same amount of space around the first and last item as there is between each two. If you want the first and last items flush against the container, use justify-content:space-between; instead.
Align-items: flex-start; will give you a left-hand margin if you're flowing down a column. If you're flowing across a row, you'll get your items lined up on a top margin. Align-items: center; will center your column or your row. Align-items: flex-end; will line up a column on the right, which is what you want if you're writing in an RTL language like Hebrew or Arabic, or sit all your row items on a bottom line.
If you're making a horizontal menu of text items, you might want to try align-items:baseline; and get all that type lined up on the actual baseline of the typeface you're using.
What if you're working in two dimensions?
Then use CSS-Grid!
Rachel Andrew, the editor of Smashing Magazine, and Jen Simmons, now at Apple and formerly a developer advocate at Mozilla, have together and separately published a ton of resources (and then I gave several WordCamp talks on what I learned from them.)
I can't tell you how happy I have been to ditch floats, in this old answer from nearly eight years ago, to the dustbin of history, except when I need to wrap type around a shape. But that's a topic for another day ...
--------------Answer from 2013---------
My preferred method, most of the time, is to put all the elements I want next to each other into a container and then float everything left. So I'm going to add a container class (I'm not a big fan of IDs - they're very limiting) to your styles and make a few edits:
.container {
float: left;
width: 800px;
}
#wrap {
float: left;
width:550px;
background-color:#fff;
margin:0 auto;
padding:0;
border-right:1px solid #ccc;
border-left:1px solid #ccc;
}
#container {
width: 500px;
margin:0 auto;
padding: 25px;
font-size:.85em;
background-color: #fff;
}
.xyz {
float: left;
margin: 0 0 0 20px;
width: 200px;
}
This code will give you the .wrap div on the left and the .xyz class on the right, with a 20px margin between them, inside the .container class.
Not sure what you want to do with your #container ID, based on your assertion that you wanted to position .xyz next to .wrap.
If you'd really like to position #container in the same row with the other elements, float it left, too:
.container {
float: left;
overflow: auto;
width: 1330px;
}
#container {
float: left;
width: 500px;
margin:0 0 0 20px;
padding: 25px;
font-size:.85em;
background-color: #fff;
}
.xyz {
float: left;
margin: 0 0 0 20px;
width: 200px;
}
The container ID and the xyz class now each have a left margin of 20px, and the big container, the class, is wider than the sum of all the divs.
This is a method that's worked over and over for me building static sites and WordPress child themes (mostly based on the Genesis framework) since I started writing proper markup in 2007.