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! :)
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>
Can you explain how can I make both facebook icons on same line?
This is simple code but I'm not good at css
<i><h1 align="center">Lorem Ipsum</h1></i>
<p>
<img src='https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRcJVzb8HeSBBgdqKTmAhtBwG0EeMuO660TwErH9HaXPf76JFp5fw' width="95px" heigh="85px">
</p>
<i><h3 align="center">Lorem</h3></i>
<p style="text-align: right;margin-right: 25px; font-size: 21px;margin-top:-15px;">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRcJVzb8HeSBBgdqKTmAhtBwG0EeMuO660TwErH9HaXPf76JFp5fw" width="95px" heigh="85px">
</p>
And this is the demo
Correct demo - https://jsfiddle.net/vjt4vxmL/2/
Your structure is rather odd, but you can just decrease the height of the iframe to horizontally line up the buttons with the image:
<iframe height="36"...
https://jsfiddle.net/vjt4vxmL/3/
Add a class to your first image. This code should put the buttons right next to each other just replace the word class in the code with whatever class you assign.
.class {
position: relative;
top: 60px;
left: -100px;
}
To align both next to each other you can use:
img{float:left;}
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>
I have this:
http://jsfiddle.net/8KWtH/
I would like to move the > so it is in the middle vertically of the two images.
How can i do this?
Use line-height to accomplish this:
<span style="font-size: 34px;line-height: 79px;"> > </span>
EDIT:
Because of the nature of the images, you need to use vertical-align to accomplish this:
<div style="float: left;">
<img src="http://www.lokeshdhakar.com/projects/lightbox2/images/image-2.jpg" style="width: 60px; height: 79px;vertical-align: middle;">
<span style="font-size: 34px;"> > </span>
<img src="http://www.lokeshdhakar.com/projects/lightbox2/images/image-2.jpg" style="width: 60px; height: 79px;vertical-align: middle;">
</div>
You can set your images to have vertical-align:middle; but that will make the > start from the middle. so it will still go up a little.
example: http://jsfiddle.net/8KWtH/14/
Applying the vertical align to the span as well makes it perfect.
example: http://jsfiddle.net/8KWtH/22/
I'd start by using the following instead of >.
>
I whipped out something here
From what I can see it is basically a variation on the other answers but it gets the job done
i have this page:
login: maria#mail.com
password: m
I want to have the string "Editar mi perfil" aligned on the right, so i have added:
text-align: right
but it doesn't work,
I have tried also:
float:right
It works but goes a bit upper than I want.
Any idea?
Regards
Javi
The problem is the display:inline. Remove it (and perhaps the top margin, if you don't want it), and it should work.
use <div> instead of <p>
<div style="float: left;">
<h2 id="nombre_apellidos">Maria Galindo Alvarado</h2>
</div>
<div style="float:right;padding-top:0px;" id="editar_o_mensaje">
<a id="enlace_editar_perfil" href="/rs2/web/miembros/edit/id/2">Editar mi perfil</a>
</div>
Change proper padding-top:0px; to align
Adding float: right; padding-top: 5px; in enlace_editar_perfil seems to fix it in Firefox. The padding-top will push it down to the position you want it.