i created buttons with shortcodes, and i need to add icon before the first text like this http://s32.postimg.org/codndv6s5/Bez_n_zvu.jpg
here is the shortcode
[button iconurl="http://www.yakna.cz/neuroportal/wp-content/themes/cityguide/design/img/child.png" title="Děti" description="Rozcestník pro děti a mladistvé do 15 let" marginright="0%" width="45%" iconalign="top" textalign="center" align="left" url="http://www.yakna.cz/neuroportal/cat/deti/" bgcolor="#00968f"] [button iconurl="http://www.yakna.cz/neuroportal/wp-content/themes/cityguide/design/img/man.png" title="Dospělí" description="Rozcestník pro dospělé" marginleft="0%" width="45%" iconalign="top" textalign="center" align="right" url="http://www.yakna.cz/neuroportal/cat/dospeli/" bgcolor="#00968f"] [rule type="clear"]
and here is the site >http://www.yakna.cz/neuroportal
i try to add css float:left, display:inline-block but not help
please advise, thanks
this page could help you: How to align inline image with text?
If not, try to set floating:left to your "Dospělí" icon.
I played around with css in console and this should work for you. Remove the span class icon and add the image directly with the text and align image in middle vertically After this you will need to increase top padding of span class text accordingly
<span class="wrap">
<span class="text" style="text-align:center;padding-top: 10px;/* display: inline-block; */">
<span class="title" style="">
<img src="http://www.yakna.cz/neuroportal/wp-content/themes/cityguide/design/img/child.png" alt="button icon" class="load-finished" style="
vertical-align: middle;
"> Děti </span>
<span class="description" style="">
Rozcestník pro děti a mladistvé do 15 let</span>
</span></span>
This is how it looks :
Related
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>
**Note all <> tags have been removed to allow code to display
**
i have been playing around with this for hours and am not really getting it to work without using a workaround at the design end of things (ie Corel draw)
*Before i go any further,
First, website URL is AdventistAviation.com.au
Second, can i just say...i know this can be done with style sheets...however, in this case...i am not doing it that way!!! (so please dont bother pestering me with that option unless there is absolutely no way the method below can work)
Third, a workaround to my problem below, is to create the image already centered in its own background (the same size as the logo next to it) then import it (this is a bad idea because if in the future someone changes the main header background to a different color other than white...its gonna look awful!)
First i add the image (this works no problem)
However because the Logo on the left in the avada theme is approx 250×250 square, Tagline text is no longer centered in the header (as you can imagine comparing above with logo below)
I am using the themeforest AVADA Theme. In theme options>Banner Code For Header #4…
I would like to add the following inline css styling in an iframe for example, to vertically centre the Tagline (ie bring it down level with the middle of the logo)
style="vertical-align: middle;"
<iframe src="http://image_URL.png" style=”vertical:align: middle;” width="200" height="200"></iframe>
This doesnt seem to do anything different to the method in 1.
<div style="vertical-align: middle;"><iframe src="http://image_URL.png" width="200" height="200"></iframe></div>
I was hoping that if i place the iframe inside a tag containing the styling i might achieve my goal...alas it still doesnt work.
I have got to the point where my head is so full of nonworking methods i cant progress further.
Can someone help with this one?
p.s i have tried to find some inline css styling tutorials (specifically about vertical alignment styling) for the tag in html 5 without any luck.
damn w3c for depreciating the html vertical alignment method in html5!
# adam:
A simple solution is to change this code:
<div id="header-banner">
<div style="vertical-align: middle;" height="170" width="500">
<img src="https://googledrive.com/host/...etc..." width="400" height="200">
</div>
</div>
To just this:
<div id="header-banner" style="margin-top: 70px;">
<img src="https://googledrive.com/host/...." width="400" height="200">
</div>
There's no good reason to use inline styles for this, but anyhow, I've edited a chunk of your HTML with inline styles that will get what I think you want:
<div class="avada-row" style="margin-top:0px;margin-bottom:0px; display: table; width: 100%">
<div class="logo" style="display: table-cell;margin-right:0px;margin-top:0px;margin-left:0px;margin-bottom:0px; vertical-align: middle;">
<a href="http://adventistaviation.com.au">
<img src="http://adventistaviation.com.au/wp-content/uploads/2014/02/AAA-QLD-LogoType5_outlinedSQC1-e1398740621697.jpg" alt="Adventist Aviation Association" class="normal_logo">
</a>
</div>
<div id="header-banner" style="display: table-cell; vertical-align: middle; float: none; text-align: right;">
<div style="/* vertical-align: middle; */" height="170" width="500">
<img src="https://googledrive.com/host/0B7IkcUtUKfX8SkpLS1NuTlR4cDA/AAA_Tagline.png" width="400" height="200">
</div>
</div>
</div>
I have been struggling to find a simple solution to the following problem using the CSS inline styles due to being on a free wordpress.com blog.
a table
inside each table cell there is an three parts
a hyperlink to enclose the two objects below
image - align vertical and horizontally centred in the table cell
text at the bottom of the table cell
<psedo markup>
<td>
<a href="#">
<img style="vertical-align:middle" src="" />
<p style="vertical-align:bottom">Text at the bottom</p>
</a>
but just cant seem to get a consistent result, am I better using <div style="display:block"> instead?
If you can use html5, use a figure:
<td>
<a href="http://gravatar.com">
<figure style="text-align: center;">
<img src="https://www.gravatar.com/avatar/5a25eba05dc8ac4384384c7a220958a6?s=32&d=identicon&r=PG&f=1"
alt="" width="32" height="32">
<figcaption>gravatar glyph</figcaption>
</figure>
</a>
</td>
The figure element was added precisely for situations like this, though the needed style here is a bit quirky.
HTML:
<table>
<tr>
<td style="text-align: center;">
<a>link</a>
<img style="display: block; margin: 0 auto;" src="http://placebacn.com/400/300">
<p>Bacon... Bacon... Bacon...</p>
</td>
</tr>
</table>
Even if you can't add a CSS file you may be able to add a <style> block before the HTML which would be better than inline styles:
<style>
td {
text-align: center;
}
td img {
display: block;
margin: 0 auto;
}
</style>
Fiddle: http://jsfiddle.net/xeTPx/2/
Please don't use tables for layout (i.e. non-tabular data - not sure if this is or not), there are other ways to have a similar layout without the bloated markup and accessibility problems. display: flex is often a good option as it now has support in a lot of today's browsers. Sometimes even using other markup with CSS display: table and display: table-cell is another option.
This might be a good read on vertical-align: http://css-tricks.com/what-is-vertical-align/
I would suggest to separate img and text from the same alignment-structure. I think you can manage to center the img but the text ruins this alignment. The trick that I use is position>relative to the parent and position>absolute to the child. Here you go:
<td>
<a href="#" style='**position:relative;**'>
<img style="vertical-align:middle" src="" />
<p style="**position:absolute; bottom:0;**">Text at the bottom</p>
</a>
</td>
By doing this p is not in the same alignment structure anymore.
I hope this solves your problem.
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 am trying to bottom align an image to a h1 text, but I am not achieving the desired results.
I tried adding two divs and align them that did not work well, now I am trying to align a span but I am not getting the desired result as well.
<div id="formheader">
<div id="formlogo"> <img src="../../Pictures/EditIcon.gif" width="17" height="20" alt="login logo"> </div>
<div id="formtitle"> <span> <img src="../../Pictures/EditIcon.gif" width="17" height="20" alt="login logo">Editor</span> </div>
</div>
Any tips on how to align images with text? I had to change from h1 to span because it would not align as h1.
Write like this:
img{
vertical-align:bottom;
}