I'm trying to make an absolute element align in the middle without a fixed width, this is I've tried:
.rm-line {
background-color: #CCC;
height: 4px;
position: relative;
text-align: center;
}
.rm-line span {
position: absolute;
background-color: #FFF;
padding: 0 10px;
top: -4px;
}
Demo at jsFiddle. As you can see in the demo, the text is not centered, I need this to be centered at any text width, even if the text has more or less characters, it should align in the middle.
How can I achieve this?
Assuming that using relative/absolute positioning isn't a requirement..
You should use display: inline-block on your span instead of position: absolute. The span will be centered by text-align: center on the div.
See: http://jsfiddle.net/2WNPm/12/
.rm-line span {
background-color: #FFF;
padding: 0 10px;
top: -4px;
margin:auto;
display:block;
}
I don't know why, but in Firefox it seems to work as desired if you set the span-box position to relative:
.rm-line span {
position: relative;
background-color: #FFF;
padding: 0 10px;
top: -4px;
}
Related
I'm running into an issue where if I add an image as a sibling to an element then that element will shift over to accommodate the inserted image. What I want is the element to stay horizontally centered even if the image is inserted. Here is a picture of the issue:
Each row is its own div with a p element and an optional image, which is the red explanation point. I want the p element with text "Corrupted" to stay horizontally aligned even with the inserted sibling.
Here is my CSS:
#friendsList div{
padding-top: 15px;
padding-bottom: 15px;
margin: 0;
display: table
width: 100%;
}
#friendsList div p{
display: inline;
}
The inserted image has css like this:
#friendsList div img {
margin-bottom: 5px,
float: right,
vertical-align:middle
}
Is there a way to have the p element stay horizontally aligned even when it has a sibling?
EDIT*** Here is a CSSdeck example: http://cssdeck.com/labs/2uel0ogm
The following possibilities come to my mind:
Add the image as background image and use background-position.
Apply position: relative to the div and something like position: absolute; right: 5px; top: 5px; to the image. This makes the image absolutely positioned within the div as container.
Place image left to the p tag and give float: right to the img.
see the example
#friendsList div{
padding-top: 15px;
padding-bottom: 15px;
margin: 0;
display: table
width: 100%;
background: orange;
border: 1px solid red;
}
#friendsList div p{
display: block;
margin: 0 auto;
text-align: center;
}
#friendsList div img {
float: right;
height: 25px;
width: 25px;
margin-left: -25px;
}
<div id="friendsList">
<div><p>first</p></div>
<div><img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/128/Emotes-face-smile-icon.png" alt=""><p>second</p></div>
</div>
Alternative solution(using position property)
#friendsList div{
padding-top: 15px;
padding-bottom: 15px;
margin: 0;
display: table;
width: 100%;
background: orange;
border: 1px solid red;
position: relative;
}
#friendsList div p{
display: block;
margin: 0 auto;
text-align: center;
}
#friendsList div img {
position: absolute;
right: 0;
height: 25px;
}
<div id="friendsList">
<div><p>first</p></div>
<div><img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/128/Emotes-face-smile-icon.png" alt=""><p>second</p></div>
</div>
I get a weird text wrap inside a list-item (li).
Check it out: http://demo.hno-eghlimi.de/#footer
I placed a span with an icon (position: absolute -> This is the cause for the wrap) before the main content of the li. I have no idea why the text inside the li is wrapping down. Do you have a solution for my problem?
You need to change two things:
Apply line-height: 30px; to the <li> element. This is because your image is 30px in height.
Apply vertical-align: bottom; to your <span> with the image. This is to vertically align your image with the text.
Also, this will break your padding between the lines, so you may want to add some bottom padding/margin to <li> elements as well.
The resulting code:
Step 1:
.footer .footer-contact-list li {
position: relative;
line-height: 30px; /* add this */
/* here you may also add some bottom margin/padding */
}
Step 2:
.footer .footer-contact-list li span {
height: 30px;
width: 30px;
border-radius: 50%;
background: #a32020;
display: inline-block;
margin: 0 5px 0 0;
position: relative;
vertical-align: bottom; /* add this */
}
Just use the below CSS for span
.footer .footer-contact-list li span {
height: 30px;
width: 30px;
border-radius: 50%;
background: #a32020;
display: inline-block;
margin: 0 5px 0 0;
position: relative;
vertical-align: middle;
margin: 5px;
}
So Im trying to do a simple header where I have the text aligned central with a 2px border running underneath this.
The code I have works and should work perfectly on every other browser except firefox which is aligning the border right of the page as if the beginning of the border is aligned in the center. If I remove the text align center the border is placed perfectly but the text is aligned to the left obviously. Why is firefox doing this?
CSS:
.my-title {
position: relative;
margin-bottom: 70px;
padding-bottom: 15px;
}
.my-title:after {
position: absolute;
bottom: 0;
height: 2px;
background-color: #ffd500;
content: "";
width: 100%;
}
.align-center {
text-align: center;
}
Html:
<div class="row">
<div class="col-xs-12">
<hgroup class="my-title align-center">
<h1>Header</h1>
<h2>Sub-Header</h2>
</hgroup>
</div>
</div>
since your pseudo element is in position:absolute; it has no width in the flow of your content and follows text-align:center; set on parent.( as absolute it has, in the flow of content, 0 for heigh and width).
3 possibilities:
add the rule : left:0; no matter what text-align on parent will be, it will be drawn from left coordonates.
add the rule : display:block; so it behaves like a block element and ill ignore the text-align, it will do a break line and will be drawn from left or right (follows the direction/dir of document).
keep it in the flow:
.my-title {
position: relative;
margin-bottom: 70px;
padding-bottom: 15px;
}
.my-title:after {
height: 2px;
background-color: #ffd500;
content: "";
width:100%;
display:inline-block;
vertical-align:bottom;
}
.align-center {
text-align: center;
}
Using property left solved the problem:
.my-title:after {
left: 0;
}
Demo
Try this:
#-moz-document url-prefix()
{
.my-title
{
position: relative;
margin-bottom: 70px;
padding-bottom: 15px;
}
.my-title:after
{
position: absolute;
bottom: 0;
height: 2px;
background-color: #ffd500;
content: "";
width: 100%;
}
.align-center
{
text-align: center;
}
}
I want to make the :before contents vertically centered, and also I want all the text inside the blockquote to be padded to the right of the :before contents.
http://jsfiddle.net/m3jEH/
I tried changing the height, line-height and min-height, but none of those allowed me to vertically center and pad the contents (I want this to work for any length the content might be)
Try this (if i understand right):
blockquote {
background-color: #fcc;
padding: 20px 20px 20px 60px;
margin: 30px;
position: relative
}
blockquote::before {
content: '{ }';
color: #b8a08e;
text-shadow: 0 1px #412917;
font-size: 30px;
font-weight: bold;
position: absolute;
top: 50%;
left: 15px;
margin-right: 12px;
margin-bottom: 12px;
min-height: 100%;
height: 100%;
margin-top:-25px
}
I have a div with a dynamic width. In that div I'd like one block of content to be centered and another block of content to be floated to the right and to stay inline.
Not a great description, I know. Hopefully, you can get a better idea by looking here
I'd like the text to be inline with the flag.
Any suggestions?
Also I've realised my questions title is a bit horrible - suggestions for an edit welcome.
Is this what you are looking for: http://jsfiddle.net/tw16/sGC7d/ ?
.wrapper {
border: 1px solid #020202;
width:100%;
position: relative;
}
.numbers {
position: absolute;
right: 0;
top: 4px;
}
See: http://jsfiddle.net/thirtydot/zTNL8/2/
.wrapper {
border: 1px solid #020202;
position: relative
}
.flag {
display: block;
margin: 0 auto;
padding: 4px 0px;
width: 35px;
}
.flag img {
display: block
}
.numbers {
visibility: visible;
line-height: 23px;
position: absolute;
right: 0;
top: 0
}