How to vertical align text over on the middle image, if i have html like this. I want the flow of the text to be always in the middle, even when there are one ore two lines of text.
<div class="area-position">
<img src="image.jpg" alt="image" />
<a class="image-text" href="/link">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</a>
</div>
I found multiple solutions but non had the image as part of the div.
Should i generate html somehow else?
There are two ways I can think of.
Detach your image from the document flow with CSS.
div.area-position {
position:relative;
}
div.image-text {
position:absolute;
top:0;
left:0;
}
Or set your image as the background of your div.
div.area-position {
background:url('image.jpg') top left no-repeat;
}
Either way you'll need to specify a width and height for your container.
you can try this code sample
#parent {display: table}
#child {
display: table-cell;
vertical-align: middle;
}
This is an old and often forgotten display method but a good way to center align stuff
Hope this helps
Take care and happy coding
Related
I'm making a website and I've come across this problem: I need an image with dynamic size (25% to be exact) to have some text to the right of it and some under it.
I know that text can be put to the right of the image using float: right, but that makes it impossible to put any text always under the image.
Here's a jsfiddle: https://jsfiddle.net/7r51y7d4/2/
Since the image has a dynamic size, I can't just add lots of line breaks, because not only would the code be ugly, but it wouldn't work well on any device with a different screen resolution than mine.
Putting the image and the right text in a div won't help because the div will only wrap around the text, leaving the image sticking out through the div's border.
If JavaScript is needed, then so be it, however, I need a PHP-free solution. (pure HTML/CSS would be nice, though)
Looks like you want the div with clear: both CSS rule, for more info: https://www.w3schools.com/cssref/pr_class_clear.asp
img {
float: left;
margin: 8px;
}
.clear {
clear: both;
}
<img src="http://cdn.nba.net/assets/icons/apple-touch-icon.png" width="25%">
<p>
I want this text to be to the right of this image
</p>
<div class="clear"></div>
<p>
I want this text to be under the image
</p>
And here is the fiddle: https://jsfiddle.net/7r51y7d4/4/
Simply use clear:both to clear floating and the second text will go under the image :
img {
float: left;
margin: 8px;
}
<img src="http://cdn.nba.net/assets/icons/apple-touch-icon.png" width="25%">
<p>
I want this text to be to the right of this image
</p>
<div style="clear:both"></div>
<p>
I want this text to be under the image
</p>
You can use the clear property to specify that the text should be inserted after floating elements.
<p style="clear: both;">
Lorem ipsum
</p>
JSFiddle: https://jsfiddle.net/7r51y7d4/3/
Target your second paragraph with CSS and use clear:both;
FOR EXAMPLE:
HTML Code:
<img src="http://cdn.nba.net/assets/icons/apple-touch-icon.png" width="25%">
<p>
I want this text to be to the right of this image
</p>
<p id="secondParagraph">
I want this text to be under the image
</p>
CSS Code:
img {
float: left;
margin: 8px;
}
#secondParagraph {
clear:both;
}
I would also set your 25% width with CSS as well. It is best to do all styling externally with CSS, instead of in-line with HTML. Easier to manage.
I am using Marp which is a tool to create presentations in markdown and convert it into pdf. On the first slide I have some content such as this:
# <center> Working with Virtual Box </center>
<img align="right" src="images/logo.png" width="250">
All of this is top center aligned. What I would want is that the text to be middle aligned(vertically and horizontally) and the image to be bottom right aligned. I couldn't find much about it in the Marp documentation. I am hoping someone with better css know how could help! Believe me, I searched for over 2 hours on this, but my lack of css skills is getting me nowhere.
There are three options:
1. Make the image part of the background.
It sounds like you are trying to put a logo on the slide in the bottom right. In this case, if it is to be on most slides - just create a new background with the image in the bottom right. Then set the image as the slides' background, using the bg keyword in the alt-text box:
2. Create an image background and offset it.
(Perhaps less applicable for a 'logo in the corner' effect put works well for other images).
Insert the image and use the bg keyword in the alt-text box, along with the either right or left.
This can be further customised with percentages - adjusting how much of the slide is given over to the background image.
The image can also be scaled with an additional percentage.
The example below sets 40% of the slide on the right-hand side over the background, and the image is then scaled to 80% of it's original size.
3. Use the footer directive and adjust the css to suit.
This allows for great flexibility of sizing and positioning of the image.
Use Marp's footer directive, and include the image link within that. This can be applied globally or locally to individual slides (as in the example below).
Then you can change the css to customise the size an position of the image. This can be done through a theme css or via the markdown text with tags (as below).
<!-- _footer: "" -->
<style>
footer {
height: 200px;
margin-bottom: -80px;
}
footer img {
height: 100px;
float: right;
}
</style>
# Logo - footer
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc molestie euismod ipsum, et malesuada sem condimentum a.
Sed pellentesque arcu mattis massa porttitor volutpat.
Try something like this :
where x is your width in %
Source (french) : https://www.unixmail.fr/informatique/presentation-avec-marp/
Tested this today and it worked:
<style>
img[alt~="center"] {
display: block;
margin: 0 auto;
}
</style>
Source: https://github.com/marp-team/marpit/issues/141
Try float right inline style:
<img src="images/logo.png" style="float:right" width=250>
I have a little tricky responsive css problem.
I'm creating articles where there is a body of text on the left, and an image on the right. And the text wraps around the image. Then on the break point I need the body copy to be above the image.
When i use this code:
<section class="news-article-body">
<img src="img/news-article-image.jpg" alt="" title=""/>
<p>
Lorem Ipsum...
</p>
</section
Css:
.news-article-body img {
float: right;
}
Looks great. Image floats right and the text wraps around when needed.
But because the image tag is before the copy I cant get the image below the copy at the break point.
So basically I need the text to wrap with this html (Or another solution):
<section class="news-article-body">
<p>
Lorem Ipsum...
</p>
<img src="img/news-article-image.jpg" alt="" title=""/>
</section
Anyone know of a technique for this? I couldnt seem to figure it out.
Thanks
You could use display:flex and order :
at break point it would be from your piece of HTML :
.news-article-body {
display:flex;
flex-direction:column;
}
.news-article-body img {
order:2;
}
Javascript and float clearing can help too : DEMO or DEMO
Code example :
onload=function() {
document.getElementById('myImg').style.position='absolute';// take img out of the flow
var myoffsetHeight = document.getElementById('myP').offsetHeight;//return height of <p>
document.getElementById('myT').style.height=myoffsetHeight +'px'; //set height to floatting element
document.getElementById('myImg').style.position='static';//bring img back in the flow
}
from a structure like this :
<section >
<b id="myT"></b>
<img src="http://lorempixel.com/250/100/" id="myImg"/>
<p id="myP">Pellentesque ....</p>
</section>
in both example, do not forget set your breakpoint
Simply insert an <img> tag at the beginning of your article text and use align="right" to get the text to wrap around it.
Pretty rusty on my HTML and CSS skills, I've done this before at some point but forgotten how to do this.
I have text on the left side of the page, I want an image on the right side of this div next to it, floating there and not disturbing the text formatting.
Text Description.....
Description..........
Description.......... Image Goes About Here
Description..........
Description..........
Does anyone know how to do this off the top of their head? Thank you.
The easy solution is to use display: inline-block to display information next to an image, without having to add inline css.
img, p {
display: inline-block;
}
<img src="image.png" />
<p>
text left
</p>
use padding and float...
I.e.
<div id="container">
<div id="text" style="padding-right: <image-width+few px>">
text text text
text text text
</div>
<img src="<imagesrc" style= "float:right" />
</div>
padding so the text doesn't overlap with the image.
this should give you the desired effect.
After the image, add a div with clear:both to return to use all the dims of the div.
for example
<style type="text/css">
#picture {
float: right;
}
#text {
margin-right: 110px;
}
</style>
edited
I have a html page which looks like the following:
I want to display some text on the left pane, but the problem is that the text should be inside the oval shaped area only. How do I achieve this? Note that the oval shaped image is the background image, however if required, I can also use a <img> tag for it if it would help. One lame way is to use <p> tags with padding, but that is not an efficient way, so kindly suggest some good methods.
EDIT: HTML:
<div id="leftStage" class="rounded-corners">
<div id="questionDisp" align="center">
</div>
</div>
CSS:
#leftStage {
position: relative;
width: 34%;
height:86%;
float: left;
}
#questionDisp {
display:none;
}
JS: (When the appropriate function is called: )
$("#questionDisp").fadeIn(1000);
$("#questionDisp").html(quesArr.q1); //data read from xml
EDIT: What I need is a div or something above the oval background, & the text should fit in it. I am getting the text from an xml file, so it is not that I have a fixed text size to be displayed
There's actually a pure CSS/XHTML code generator on csstextwrap that does exactly what you want.
EDIT:
The concept here is to float <div>'s on either side of your text so that your content is forced to "flow" in between them. By setting the width of your floated <div>'s, you can create a wide variety of cascading "stencils."
See concept illustrated here: fiddle
If it is background-image then use the position:absolute with proper margins (top and left), and set the width less than that the oval background-image. Then display property 'block'.
Maybe you could try the jQuery plugin Text Fill
also see: https://stackoverflow.com/a/688362/753676
I removed my answer since only the left float worked.
If you paste this code: it'll show you exactly how it works. I did a border-radius instead of creating a circle png.
<div style="width:250px;height:230px; border-radius:125px;background:#efefef;padding-top:20px; text-align:center">
The code for my<br /> fix isn't pretty but it should<br />work It's not automatic, but it<br /> does the job that you need it<br /> to do.
</div>
You have not shared any HTML, The working code is with some assumption
The HTML is,
<div id="main">
<div class="text">This is text</div>
</div>
Where div with classtext is the text container.
The CSS for same will be,
#main{
background-image:url('http://i.stack.imgur.com/bw2HK.png');
height:563px;
width:691px;
}
#main .text{
color:#FF0000;
width:240px;
text-align:center;
top:100px;
border:1px solid;
float:left;
position:absolute;
}
Here .text is the class that represent the text styling. The main part is position:absolute;. This will set the text div position to absolute. Now you can move the div above image div using top and left styles.
Please do review working example here
P.S. The border, color and other styles can be changed as per your need.