http://alexandermasters.com/flora/2015/10/05/corey-boyce/
Trying to horizontally center the image within its respective container.
Can't seem to isolate the correct element with which to apply
display: block;
margin-left: auto;
margin-right: auto;
Have progressively worked my way through the code starting from the image and moving up to no avail.
Try this CSS code
.gallery-item {float:none; margin:0 auto; text-align:center}
targeting the IMG tag would not work because it is nested in another element, so you have to center the parent of the img.
when there is a float, margin:auto will not work properly
If you're not concerned about IE9 compatibility, you can easily achieve this by applying display: flex to the parent <dt> element.
Check out Chris Coyier's Complete Guide to Flexbox if you haven't already read up on this beautiful member of CSS3. I also recommend this article by Paddi McDonnell.
Flexbox underwent some prefixing inconsistencies, so it would be wise to have a fallback style if those users are important to you.
try this:
.gallery {
text-align: center;
}
.gallery dl {
display: inline-block;
float: none;
}
(also clear your browser cache)
Related
I have a page with tab navigation at the top (page here; tabs are 'Production,' 'Story and Development,' etc). I would like to ensure the row of tabs are horizontally centered on the page. How can I accomplish that? If I'm not mistaken, it's currently a tad off center.
By following the instructions on the W3 Schools page on CSS centering, I came close by setting:
display: block;
margin: auto;
width: 99%;
But I'm not sure if that's the proper/best solution. Is there a solution that does not require setting width: 99%?
If it matters, the site has been built with WordPress.
Thanks.
You have two ways you could approach this:
The text-align: center Method
.ut-nav-tabs li {
display: inline-block;
float: none;
vertical-align: top;
}
.ut-nav-tabs li:last-child {
margin-right: 0px;
}
.ut-nav-tabs {
text-align: center;
}
This works only if you declare text-align: center on the containing parent - the parent element must be a block element. The nested children elements must be inline block elements (e.g: display: inline-block) with no float rules declared on them, floats will negate any attempt to horizontally center align elements this way, and most other ways.
The display: flex Method
.ut-nav-tabs {
display: flex;
justify-content: space-around;
}
.ut-nav-tabs li {
float: none;
margin-right: 0px;
}
This is the "new kid" on the block and the "hot fix" for any alignment issue concerning CSS these days, I would hazard to say it is the "jQuery" of CSS now.
Anyway, it is for good reason, flex-box rules allows you to specify general alignment (horizontally and vertically) and lets the browser do all the calculations for precise positioning - this is also why is a popular responsive solution too.
Browser Compatibility: A heads-up though, flex-box has poor or very limited support for legacy browsers, older browsers may give you unexpected results, so you should use this with caution in production code if that will be a concern.
I think this way is better :
.ut-nav-tabs {
width: 100%;
text-align: center;
}
.ut-nav-tabs li {
width: 179px;
float: none;
display: inline-block;
zoom: 1;
vertical-align: middle;
}
Im having problem vertically aligning a text with CSS. I have tried probably everything but it just doesnt want to work. You can see my demo jsfiddle demo here:
http://jsfiddle.net/zcU7M/7/
.section {
text-align: center;
vertical-align: middle;
display:table-cell;
}
With this code it should work but something is wrong.
How can I fix this? Thanks in advance.
EDIT: Updated demo: http://jsfiddle.net/zcU7M/7/
Write:
.section {
display: table-cell;
vertical-align:middle;
}
Updated Fiddle.
The .section needs the display: table-cell
.section {
height: 200px;
background:#ccc;
border-bottom: 1px solid #dcdcdc;
text-align: center;
vertical-align: middle;
display:table-cell;
}
The display:table-cell is what allows an element to have children vertically aligned, so it has to be on the parent to be able to have the children aligned vertically.
Here's a Working Demo.
For a vertical paragraph align use that:
p {
height:200px;
line-height:200px;
text-align:center;
vertical-align: middle;
}
JSFiddle example: Exemple
The problem is, that the <p>-Tag just adds some margin at the bottom. You can see this, when inspecting with firebug. Simply add a margin: 0 to your .section p selector:
.section p {
font-size: 15px;
font-family: Arial;
font-style: italic;
margin: 0;
}
http://jsfiddle.net/zcU7M/22/
all credit goes to this link owner #Sebastian Ekström Link, please go through this.
see it in action codepen,
by reading above article I crated a demo fiddle also.
With just 3 lines of CSS (excluding vendor prefixes) we can with the help of transform: translateY vertically center whatever we want, even if we don’t know its height.
The CSS property transform is usally used for rotating and scaling elements, but with its translateY function we can now vertically align elements. Usually this must be done with absolute positioning or setting line-heights, but these require you to either know the height of the element or only works on single-line text etc.
So, to do this we write:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
That’s all you need. It is a similar technique to the absolute-position method, but with the upside that we don’t have to set any height on the element or position-property on the parent. It works straight out of the box, even in IE9!
To make it even more simple, we can write it as a mixin with its vendor prefixes:
I'm currently redesigning my website from a table layout to CSS. I'm having some problems with what seemed like a very simple task.
The site is simple. A box in the middle of the screen that contains several links.
The old site used <td valign="center"> to center all the links in the box. CSS seems to have no equivalent. I've been centering elements using negative margins like so:
div {
height: 200px;
position: absolute;
top: 50%;
margin-top: -100px;
}
This works fine when you know exactly how big the element you're centering is, but I need to be able to center the links without knowing how much vertical size the links take up. I just want the aligning in the box to act like text-align: center. Only vertically too.
Current website designed with tables
Current progress on the CSS version
You have 4, possibly 5 solutions one added to the bottom since it's a combination of different css from your original and js to set height:
Use a table cell and center it's content vertically
Use display: table-cell; vertical-align: middle; as css for your div
Update margin-top every time the div's height changes via javascript
Use css3 flexbox (you need to use vendor-specific extensions so it won't work on some older browsers)
Simple example using old-style flexbox - chrome version - add a wrapper div and set it's styling to this:
#wrapper { display: -webkit-box; -webkit-box-align: center; }
#wrapper > div { margin: auto; }
fiddle for this http://jsfiddle.net/gK7YU/
New style flexbox - also chrome version, you'll have to add the other vendor prefixes as well as the version without any prefixes in the final product.
#wrapper { display: -webkit-flex; }
#wrapper > div { margin: auto; }
fiddle for this: http://jsfiddle.net/LeHRD/
The fiddles contain a few more css properties so you can see what is happening easily.
Oh, sorry, you don't need the wrapper div, you can just center vertically any content with flexbox... well, anyway the solution I proposed can be combined with display: table-cell; so it works in older browsers as well.
You can also use absolute positioning with specified height jsfiddle.net/N28AU/1
#wrapper { possition:relative }
#wrapper > div { position:absolute;top:0;right:0;bottom:0;left:0;margin: auto;}
you can calculate height from the contained elements and update it via js if you want to avoid negative margins.
I've been to your website and copied the html here.
You can do this:
<style>
#box{
display: table;
}
#box > div {
display: table-cell;
vertical-align: middle;
}
</style>
<!-- Your html part -->
<div id="box">
<div>
Link A
Link B
Link C
Link D
</div>
</div>
You must wrapped a div element inside #box because display: table-cell property won't work properly if you don't have a wrapper element that is set to display: table.
Your example here: jsfiddle
I am having the hardest time trying to figure out this (should be) simple css:
Website is here:
http://mibsoftware.us/fct/index.php
I'm simply trying to get my #leftcolumn and #maincolumn to be inside the #content_container, yet whatever I'm doing isn't working at all. I'd like for the #content_container to be a dynamic height since the height of #leftcolumn and #maincolumn change depending on the page you are on.
From the framework of my css it should work fine, so I must be missing something in my .css file declaring these divs. Any help would be greatly appreciated, as this will be a great learning experience for me.
Set overflow:hidden on your #content_container.
Here is a nice resource to learn more about clearing floats and such.
You could also set .clearfix class on your #content_container and define it in CSS like this:
/* Clearing floats without extra markup
Based on How To Clear Floats Without Structural Markup by PiE
[http://www.positioniseverything.net/easyclearing.html] */
.clearfix:after, .container:after {
content: "\0020";
display: block;
height: 0;
clear: both;
visibility: hidden;
overflow:hidden;
}
.clearfix, .container {display: block;}
I am using AjaxControlToolkit CalendarExtender. Some previous rule in my stylesheet is affecting div's within the calendar.
div#paymentRegion div
{
float:left;
width:49%;
}
There are DIVs within the calendar that are being forced to 49%. How can I have the calendar ignore the previous settings and use the styles that come with the calendar? Is that possible? I am afraid to change the current rule, but I think it probably needs to be, however many other divs on this control rely on it. What does the > symbol do to a css rule. For example
div#paymentRegion > div
{
float:left;
width:49%;
}
Maybe that will help? I am open for any suggestions.
Thanks,
~ck in San Diego
Theoretically, the > symbol would select only divs that are immediate children of #paymentRegion. A div nested farther down would be unaffected. However, not all browsers interpret that correctly, so it's not something you can reliably use.
A more direct solution is to wrap your calendar in a <div id="calendar"> and then write an overriding rule:
div#paymentRegion div {
float: left;
width: 49%;
}
div#calendar div {
float: none;
width: auto;
}
Now even though most divs inside #paymentRegion will be floated, the divs inside #calendar won't be!
VoteyDisciple is right, since his proposed solution's rule has a higher specificity than your current one.
More information on calculating specificity rules.
It's difficult to know what to suggest without any HTML. Can you tell us the basic structure? For example, is the div that is targeted in the first rule a direct child of #paymentRegion?
If it is the highest level div (not necessarily a direct child), and all other divs are below that one, you can try this:
div#paymentRegion div {
float: left;
width: 49%;
}
div#paymentRegion div div {
float: none;
width: auto;
}
However, the best bet would be to set a class/ID on that mysery div, if you can change your HTML.
div#paymentRegion div#uniqueID {
float: left;
width: 49%;
}