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;
}
Related
I am currently making the footer of my project, and somehow every element I code seems to move every time I (or the user) resizes the window.
I have tried -
margin: 0 auto;
position: relative; float: left;
EDIT:
Code:
.pdiv{
/* div might be helpful? */
}
.footer {
position: relative;
left: 300px;
}
Try to use flexbox in your footer,
footer {
display: flex;
justify-content: center; // or flex-end, flex-start of your choice how you want them to look
align-items: center; // or same as above
}
Make yourself a favor and please use flexbox instead of floats, please, floats are not meant to do layout, this is more historical as before flexbox, there was no "universal" nor "adapted" way to compose clear layouts (dont start me on table's, plz).
This may help you:
https://www.smashingmagazine.com/2017/07/enhancing-css-layout-floats-flexbox-grid/ (Float to Flexbox migration)
https://flexboxfroggy.com - A game to learn Flexbox
Seems I cant find correct class to horizontally align the Agent imageswith text below . site: http://hendersonrealestatepros.com/listings/2724-mintlaw-ave/
tried
.connected-agents{
display: inline-block;
margin: auto;
width: 70%;
padding: 10px;
}
.connected-agents{
float: left;
width: 70%;
padding: 10px;
}
i would recommend using margin: 0 auto; and float: none for #listing-agent so that it will align to the center. please let me know what output you are expecting
try this -
#listing-agent .connected-agents {
display: table-row;
}
.agent-thumb, .agent-details {
display: table-cell;
vertical-align: middle;
padding-bottom: 20px;
}
You have quite a large amount of CSS classes interacting which makes a simple solution a bit tough due to the "style soup" (styles overriding styles overriding styles) and markup that could be improved upon.
The one main assumption I'm going to make is that you want the agents to take up the full width that the paragraphs above the agents take up.
Remove float: left; and width: 48%; (possibly the padding too) from #listing-agent. You have two selectors setting float and width for #listing-agent. They are #listing-agent, #contact-form {...} (in the <head> of the page) and #listing-agent, #listing-agent + #listing-contact {...} (in impress-agents.css line 141). I would remove #listing-agent from those selectors so they are: #contact-form {...} and #listing-agent + #listing-contact {...}.
Remove the child <div class="connected-agents"> of #listing-agent.
Doing those two things will get the agent section the same width as the paragraphs above.
Now to horizontally align the agents (with text below image).
Make sure to undo the display table stuff that you added from another answer.
Float the agent container element to the left. You have a myriad number of CSS classes to hook onto, connected-agents vcard post-11274 employee type-employee status-publish has-post-thumbnail hentry offices-tr-realty job-types-broker-salesperson entry. Use which ever on works best for you. If you choose to use .connected-agents make sure to remove the <div> mentioned above. Below is one option:
#listing-agent .employee {
float: left;
width: auto; /* removes `width: 100%;` set by .hentry and .entry */
}
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)
I have a working example of vertically centering elements of unknown height, using three elements:
<section>
<div>
<img src="http://placehold.it/100x100"/>
</div>
</section>
And the CSS:
section {
display: table;
width: 100%;
height: 100%;
position: absolute;
text-align: center;
}
div {
display: table-cell;
vertical-align: middle;
}
There's also a JSFiddle example here: http://jsfiddle.net/Y6KS9/
However I'd like to avoid using unnecessary wrappers if possible. Eg, having the img itself display as table-cell:
div {
display: table;
width: 100%;
height: 100%;
position: absolute;
text-align: center;
}
img {
display: table-cell;
vertical-align: middle;
}
However this doesn't work - see the JSFiddle example at http://jsfiddle.net/U2c9R/ - the img is not centered within the div.
Is it possible to vertically center an image of unknown size within its parent using only two elements?
Edit: I'm aware of Flexbox, and intending to throw out the table cell hack completely once IE9 dies. But right now I need to support old browsers.
You could try to use the CSS3 Flexible Box Model.
You should check the browser availability. As you can see by the -webkit vendor prefix my Example currently works only in -webkit-based render engines. But i'm pretty sure it'll work in most modern browsers.
Here is an overview of browsers which supporting the Flexible Box Model: http://caniuse.com/#feat=flexbox
div {
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
height:100%;
width:100%;
position:absolute;
}
Example: http://jsfiddle.net/U2c9R/4/
Update
For Cross-browser support for the CSS3 Flexible Box Model you could use Modernizr and a proper Polyfill which adds support for IE 6-9 and Opera 10.0+. The only hint is, this wouldn't work without JavaScript. But maybe this is an option?
I have a Span tag containing a IMG tag and another Span tag.
I would like the inner Span tag to be aligned to the left and the IMG tag to be centrally aligned plus I want both the tags to be vertically aligned in the middle, and I can't seem to get this right...
This is how it looks (It's blue because the outer Span tag is marked in FireBug to show that it's stretching the entire surface):
As you can see in the image, both tags are centred and they are also aligned in the top of the container, I don't want either of this.
This is the markup:
This is the current CSS of the tags:
.v-button-wrap {
height: 100%;
display: block;
padding: 6px 15px 0 9px;
vertical-align: middle;
line-height: normal;
text-align: center;
}
.v-icon {
margin-left: auto;
margin-right: auto;
vertical-align: middle;
line-height: normal;
text-align: center;
}
.v-button-caption {
text-align: left;
line-height: normal;
vertical-align: middle;
}
I left out the CSS that isn't relevant for my problem, colors, font-specs and such. Needless to say I'm no ace at CSS. And I've looked up several guides covering the problem, but I've only managed to find examples where the entire content of a div is centered, and that's not what I want.
Does anyone with good CSS knowledge see the problem in my code? Or have another solution to solve my problem..?
Thanks!
EDIT: Here's a screen shot of the entire layout due to request. Sorry I have to blur some things... but they are in either case not important. =)
EDIT2: I did manage to solve my problem using the following CSS:
.v-button-details-panel-header .v-button-wrap {
height: 100%;
text-align: inherit;
padding: 0px;
}
.v-button-details-panel-header .v-button-wrap .v-button-caption {
display: table-cell;
position: relative;
text-align: left;
}
.v-button-details-panel-header .v-button-wrap .v-icon {
display: table-cell;
position: relative;
top: 12px;
margin-left: auto;
margin-right: auto;
}
I'm sure the advice dgvid proposed would have been good for a static layout. But since the panels and horizontally stretched buttons move depending on expansion and collapsing that wasn't a fitting solution.
You might need to set the CSS display property of both your img and span.v_button_caption to inline-block.
See also this article: Understanding vertical-align, or "How (Not) To Vertically Center Content"
As for another technique to achieve the desired result: If you know the height of the container element and you know the height of the element to be centered (and unfortunately from the CSS you've posted, it does not appear that you do), then you could
Give the container element CSS property `position: relative'
Give the element-to-be-centered CSS property position: absolute
Set the CSS top property of the element-to-be-centered to (containerHeight / 2) - (centeredEltHeight / 2).