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).
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 am trying to make my content align left within a div... the code is below... I made this work once but lost the code. now I cannot figure it out again.
Html5:
<div class="wrapper materials">
<section id="materials">
Then I make an article tag
then I create the article content including h tags, p tags etc.
then I close the tags
then I close the div
css:
.materials {
width: 80%;
background-color: #fff;
margin-left: auto;
margin-right: auto;
text-align: left;
}
The text in the materials wrapper is staying centered but I want it aligned left.
First of all you are using materials as a class as well as an id so if you are targeting the element holding materials as id, than you need to use #materials and not .materials
#materials {
width: 80%;
background-color: #fff;
margin-left: auto;
margin-right: auto;
text-align: left;
}
Apart from this the only thing possible here is that you might be having some more specific selector which is overriding the block of your CSS, try using
#materials {
text-align: left;
}
Your class .wrapper has text-align: center. It would be advisable to review and simplify your stylesheet based on case uses. For example, what text do you want centered within elements of class .wrapper? If you specify those cases, then only those elements within the wrapper will be centered.
Alternatively, if you want everything in .wrapper except for .materials to be centered, then specify that as follows:
.wrapper.materials {
text-align: left;
width: 80%;
margin: 0 auto;
}
By combining the two in this way you're telling the browser not to choose one class over the other where they differ, but to treat them as a special, unambiguous case.
First of all, I do apologize I don't put my link here, it's a site for work and I'm not allowed. I'll post the relevant parts of my code if necessary though.
So the problem is pretty basic - i have one div with some images, and a header <h3> below where my content starts . No matter how much I try to create some space between the two, it doesn't work. I've tried margin and padding on both elements, changing between position relative and absolute, and throwing in lots of <br> tags. Nothing works!
What causes my two elements to be so attracted to each other? What may cause inability to create space between two elements?
Thanks!
Edit: here's my css code for the div:
.bmwrapper {
width: 720px;
position: relative;
margin-left: auto;
margin-right: auto;
z-index: 1;
}
.bmvenstre {
float: left;
text-align: left;
z-index: 1;
}
.bmhoyre {
float: right;
text-align: left;
z-index: 1;
}
So it's one big div that acts as a wrapper, and two divs (left and right) inside. The links are displayed as blocks:
a.bmlink {
display: block;
margin: 0;
padding: 4px;
font-family: Tahoma, Verdana, Segoe, sans-serif;
text-transform: uppercase;
font-size: 18px;
font-weight: bold;
letter-spacing: 2px;
color: #08A;
text-decoration: none;
z-index: 2;
}
The header below this div is just a <h3> tag, then there's some text. Hope this helps!
You can try 2 things:
1) Put the elements overflow:hidden
2) put the elemnts display:block
If number 2 messes up with your design, try putting them float:left;
Since I don't have the code I can't give you more information, but when margins/paddings do not work, it is usually because you are either applying it to an Inline item (hence number 2) or you have a container where everything inside is floating, so the container won't have the proper height (hence number 1)
Sounds like margin collapse. Here are a couple of ways you could solve this:
Give your content div a transparent border or give your content div the css declaration of overflow: auto;
Some people when they give it a 1px border they also give it a -1px margin to counter the border.
I've gone through CSS validation (which did find some pesky unclosed tags, sorted now).
I'm trying to align an image to the top right side of my page, with title text on the top left.
I can do this, but when I resize the browser window the image always wants to overlap the title text before either of them resize. If I remove the margins that I've used to place the image then the image sits under the title text (and to the right) instead of just to the right of it, but I feel removing this (while keeping the positioning) might be key. I do need the image to be overlapped by some other elements though.
Here's a snippet of my code for the image:
img#site-logo {
max-width: 100%;
height: auto;
clear: both;
position: relative;
z-index: 0;
margin: -12.87em 2em -16em 0px;
}
And for the site title:
#site-title a {
font-size: 4.875em;
font-weight: bold;
line-height: 78px;
padding: 0px;
margin-right: auto;
white-space: nowrap;
z-index: 2;
position: relative;
}
Site is live here:
http://dominicpalma.com/
There are surely several different approaches to solve your problem.
But in my eyes it would be the best solution to set a min-width for your #page element.
#page{
min-width:900px;
}
I have played a little bit around with the width and think a min-width of 900 px fits best in your case.