Following is my fiddle in which I am trying to vertically align the text with Icon Font. Kindly let me know what's an appropriate way to do such alignment:
How can I vertically align the font icon with the text on this fiddle
Wrong output:
[ICON]Text
Text Text
Expected Output:
Text
[ICON] Text
Text
You can simply make the icon float (bootply #1):
.panel-title .glyphicon {
float: left;
margin-right: 10px;
}
but I prefer using Block Formatting Context (BFC) properties when it comes after a floating element (needs an extra element to enclose your text). It basically creates a column along your float instead of letting your text wrap around it as usual (bootply #2):
HTML:
<a href="#collapseFour">
<span class="left mr1 glyphicon glyphicon-file"></span>
<span class="bfc">Reports Reports Reports Reports Reports Reports Reports</span>
</a>
CSS:
.left {
float: left;
}
.bfc {
overflow: hidden;
}
div it.
put the icon in a separated div, like this:
<div>
{icon}
</div>
<div>
{text}
</div>
and put them inline. display:inline-block... this should work.
you can make a little table like this
<table>
<tr>
<td valign="middle">[ICON]</td><td>Text<br>Text<br>Text</td>
</tr>
</table>
Related
Today's WordPress trauma...
Goal: using a three column layout, have an icon next to link text, followed by some descriptive text.
50pxICON (here's my link that should be centered vertically next to
the icon)
Here's some text describing the destination
What I can't seem to do is get my link text vertically centered on the icon. I've tried wrapping it in a div, tried specifying the height of the div, etc... I'm sure it's something basic that I'm overlooking
Current code:
[col3]<div style="height:50px;"><img src="myimage"> text</div>
Here's our description[/col3]
There is a lot of ways & approach, Try this approach and Hopefully, this will help.
<div class="wrapper">
<img class="image" src="myimage" style="
height: 50px;
display: inline-block;
vertical-align: middle;" />
<a href="mylink" class="link-text"
style="display: inline-block;
vertical-align: middle;">
Your text
</a>
</div>
I want to have "This is a test" left aligned and "[Rare photograph]" right aligned but still be on the same line.
I'm a newbie at HTML5, so a simple explanation would be appreciated.
Thanks! :)
<p style = "margin-left:75px;max-width:750px;"><br/>
This is a test.
[Rare photograph]
</p>
You can't do that without an additional tag, but what you can do is inject a <span> tag within a <p> tag, and give each <span> a respective float: left and float: right:
<p style="margin-left: 75px; max-width: 750px;">
<span style="float: left">This is a test.</span>
<span style="float: right">[Rare photograph]</span>
</p>
Hope this helps! :)
I am trying to adjust the CSS so the "product" and product information is centered and not floated to the left I cannot adjust the HTML as its given via a shortcode thats added into the WP post but maybe I could wrap it in a div?
HTML:
<ul class="products ribbon">
<li class="product last first">
<a href="http://dailybabydeals.co.nz/shop/estella-rose-designs/">
<div class="thumbnail">
<span class="onsale">Sale!</span>
<img width="325" height="325" src="http://dailybabydeals.co.nz/wp-content/uploads/2013/02/Front-Page-325x325.jpg" class="attachment-shop_catalog wp-post-image" alt="Front Page" />
<div class="thumb-shadow"></div>
<strong class="below-thumb">Estella Rose Designs</strong>
</div>
<span class="price"><span class="from">From: </span><del><span class="amount">$25</span></del> <ins><span class="amount">$19.95</span></ins></span>
</a>
<div class="buttons">
Select options</div>
</li></ul>
CSS:
CSS
Okay, let's try this again now that I understand your question better. So you want to center the <ul> element as a whole? That is a lot simpler than what I originally thought you were going for.
To do that, all you need to do is wrap the <ul> element in a span tag that is set to display as an inline-block. Then set the containing element so that its text is centered.
Try this:
<html>
<head>
<style language="text/css">
/*<![CDATA[ */
#test1 {
text-align: center;
}
#test2 {
display: inline-block;
text-align: left;
}
/* ]]> */
</style>
</head>
<body>
<div id="test1">
<span id="test2">
<!-- Place your <ul> element here -->
</span>
</div>
</body>
</html>
how it works
The "test2" element is set to display as an inline-block, which means it displays inline with the text. This means that it can then be affected by properties that manipulate lines of text, such as "text-align".
Setting "text-align" to "center" on the "test1" element makes the inline content -- the "test2" element in this case -- within it become centered on the screen.
The standard way to center a block is to set the "margin-right" and "margin-left" properties to "auto", but that only works for elements that are displayed as blocks and that have a width that is less than 100%.
I would just put it in a div and float it next to another div with nothing in it.
http://www.barelyfitz.com/screencast/html-training/css/positioning/
Like in step 8 in this link.
The reason that it looks like the text "Sale!" is floated to the left is that <img> elements display as inline blocks by default, so the image is on the same line of text as the words "Sale!". A <br /> tag immediately following the text "Sale!" would solve that problem; but you said you can't modify this HTML, right?
Given that restriction, here is how I was able to solve the problem...
Surround the HTML from your example in a <span> tag and assign it a class. I used "test" as my class name".
Then Place this CSS in the head of the HTML document:
<style language="text/css">
/*<![CDATA[ */
.thumbnail img {
display: block;
}
.test {
display: inline-block;
}
.test .price, .test .below-thumb {
display: block;
text-align: center;
}
/* ]]> */
</style>
why it works
The selector for making the image display as a block solves the problem of the missing <br /> tag.
The span tag with which you surrounded the HTML displays as an inline block. This means that it will collapse around its contents, giving you a box within which you can center the text.
Making the items that contain the text display as a block causes them to take a width of 100%, filling the surrounding box
The inclusion of "text-align: center" is what finally makes the text display as centered within its container
I'm having a hell of a time aligning two jquery-ui icons and text in the middle of the line in a header. (code blow). Can anyone assist pretty pleeeeease?
<div class="ui-widget-header">
<span class="ui-icon ui-icon-close"></span><span class="ui-icon ui-icon-wrench"></span>Text
</div>
I'm not perfectly clear on what you are wanting as an output.
If you are trying to get the icons and the text to all appear on one line, you do that by creating a new CSS class:
.ui-icon.inline { display:inline-block; }
.ui-widget-header.center { text-align:center; }
And then adding that class to your icons:
<div class="ui-widget-header">
<span class="ui-icon inline ui-icon-close"></span>
<span class="ui-icon inline ui-icon-wrench"></span>
Text
</div>
If you want them to then be horizontally centered in the div you could then change the div to:
<div class="ui-widget-header center">
i write a program to show arabic text.
i use two type of font:
1:a font with out Arabs
2:a font with out text
i can change each color separately with this method.i used two span tag with the same id for showing text with arab and text with out arab on each other.
result:
every thins is ok.
but when i change text-align to justify it dont work good and the text goes out.
result:
a part of code:
<span class=ThuithQA id=1-0> <font size=5>بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيمِ (١)</font></span><span class=ThuithE>
<font color=Red size=5>بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيمِ (١)</font></span><span class=ThuithQA id=1-1> <font size=5>الْحَمْدُ لِلَّهِ رَبِّ الْعَالَمِينَ (٢)</font></span>
i wnt to show text justify.
If every verse is in a separate span then set your css as given below:
EDITED:
CSS
span{
display:block;
text-align:justify;
direction: rtl; /* Direction of text right to left */
}
See this Demo:
http://jsfiddle.net/rathoreahsan/mSEj9/1/
If you want to show all text justify, you need a wrapper over all span and this styles:
.wrapper {
direction: rtl;
text-align: justify;
}
You can't align text justify in each span, because they havn't text for full line + some simbols
Try setting the spans to display:block or set widths
I could Solve my problem with this code:
i put arab and text in a seperate div
and set div
posation:absolute
and set body
text-align:justify;
a part of code
<div style=" position:absolute;">
<span class=ThuithQA id=1-0>
<font size=5>بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيمِ (١)</font>
</span >
<span class=ThuithQA id=1-1>
<font size=5>الْحَمْدُ لِلَّهِ رَبِّ الْعَالَمِينَ (٢)</font>
</span >
</div>
<div style=" position:absolute;">
<span class=ThuithE>
<font color=Red size=5>بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيمِ (١)</font>
</span >
<span class=ThuithE>
<font color=Red size=5>الْحَمْدُ لِلَّهِ رَبِّ الْعَالَمِينَ (٢)</font>
</span >
</div>
result:
Try text-align to right.
span{
display:block;
text-align:right;
}