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>
Related
I've been trying to get the images to center on the page. I tried justifying the content in the center and also aligning items in the center but neither works. Neither does margin auto (which usually does work). I tried setting similar stylings for the div containing the image but still no change. I know I can add margins but causes and issue when I set the background color of the page so I'd like a different solution. Let me know if you have any ideas, thanks!
<ngb-carousel *ngIf="images" [showNavigationArrows]="showNavigationArrows" [showNavigationIndicators]="showNavigationIndicators">
<ng-template ngbSlide *ngFor="let image of images">
<div class="picsum-img-wrapper">
<img [src]="image" alt="Random slide">
</div>
</ng-template>
</ngb-carousel>
img {
width: 50vw;
height: 80vh;
margin-left: auto;
margin-right: auto;
}
Wrap your carousel inside a div with display flex. Something like this.
<div class="carouselCont">
<ngb-carousel *ngIf="images" [showNavigationArrows]="true" [showNavigationIndicators]="true">
<ng-template class="imageSlider" ngbSlide *ngFor="let image of images">
<div class="picsum-img-wrapper">
<img [src]="getImageLink(image)" alt="Random slide">
</div>
</ng-template>
</ngb-carousel>
</div>
The css style of carouselCont class applied shall be
.carouselCont{
display:flex;
flex-direction:row;
justify-content:center;
align-items:center;
height:100vh;
}
This way your carousel shall be aligned to center of the screen horizontally and vertically. No need to give vh/vw or margins to image itself for the sole purpose of aligning carousel in center (this way your images shall get stretched /shrinked in different screen resolutions)
Thanks.
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>
My problem can be better understood by the image below.
I have several div elements (div A) which have a variable size that depends on their content.
They are displayed inblock inside a larger container with a max-with defined(the large outer rectangle without a name).
Everything works fine until I had inside divs A two other divs (B and C) which I what that look like the image.
I haven´t been successful. I've tried several combinations of css properties like display, margin, padding, float... negative margins... tables...
Any help would be welcome.
Update
the code looks like the example:
html
<div style="max-width: 800px;">
<div class="div_a">
<div class="div_b">
short text
</div>
<div class="div_c">
short text
</div>
</div>
<div class="div_a">
<div class="div_b">
looooong text
</div>
<div class="div_c">
looooong text
</div>
</div>
<div class="div_a">
<div class="div_b">
huuuuuge text
</div>
<div class="div_c">
huuuuuge text
</div>
</div>
</div>
css
.div_a{
display: inline;
}
.div_b{
display: block; /* doesn't work*/
}
.div_c{
display: block; /* doesn't work*/
}
If I understand correctly, this should do it:
.div_a{
display: inline-block;
}
:)
...assuming you don't have other styles, besides border and spacing properties.
A fiddle example here
I have an HTML "toolbar" containing a number of widgets arranged horizontally. Each item is represented by a div in the source document:
<div id="widget1" />
<div id="widget2" />
<div id="widget3" />
I position the divs using float: left. The problem is that I also want them to be pinned to the top of the toolbar so that they don't wrap around if the user reduces the width of the window. Instead, I just want them to overflow horizontally (with the overflow hidden) so that the behavior is like that of a real toolbar.
In other words, I want something like position: fixed but only for the vertical coordinate. Horizontally they should be positioned one after another in a row. Is there any way to do this with CSS?
Update Here's the real HTML I'm using. The divss with class="row" are the ones that should appear as widgets in the toolbar, arranged horizontally in a single row.
<div class="row" id="titleRow">
<span class="item"> <img src="../images/logo.png" height="26" /> </span>
<span class="item" id="title">Title</span>
<span class="item" id="close" onclick="window.close();"> close </span>
</div>
<div class="row" id="menuRow">
<span class="item"> <ul id="menu"></ul> </span>
</div>
<div class="row" id="searchRow">
</div>
<div class="row" id="pageRow">
<span class="item" id="page-related-data"> Page-related data: </span>
</div>
Rather than float: left; try display: inline-block; vertical-align: top;. Then set white-space: nowrap; and overflow: hidden; on the parent element. See http://jsfiddle.net/rt9sS/1/ for an example.
Note inline-block has some issues. It's white space aware (so white space around elements in the HTML will be visible in the document). It also has limited support in IE6/7, although you can work around that by giving the element layout, e.g. .oldie .widget { display:inline; zoom:1; }. See http://www.quirksmode.org/css/display.html#inlineblock for more.
I know this is an old question, wanted to add a simple jquery answer for those that run across it.
$(window).scroll(function(){
$("#keep-in-place").css("top",$(document).scrollTop()+"px");
});
To make higher or lower on page simply add to $(document).scrollTop()
Works for me