I have automatically generated HTML (almost impossible to change it because it is generated by a third party library) that can generate this kind of HTML
<p>
<img src="...">
<img src="...">
</p>
It produces something like this screenshot:
I would like to be able to center the 2 image horizontally (here there are 2 but we can I have 1 or more).
Added: Full html
<div class="innercontent" data-slide-fit="fit" style="font-size: 32px;"><h1>Images</h1>
<ul>
<li>Images can be local or from Internet. It is recommended to use local images for better performances.</li>
</ul>
<p><img src="img/photos-background.jpg" alt="" style="max-height: 267.9692951849267px;">
<img src="img/photos-background.jpg" alt="" style="max-height: 267.9692951849267px;"></p>
<ul>
<li>They are streched or resized in order to occupy available space while giving room for other elements.</li>
</ul>
</div>
If we consisder the fact that the images will have the same width, you can approximate this using translate and margin. It's an approximation because there is the tiny space between the images
<p>
<img src="https://picsum.photos/id/1/150/100" style="margin-left:50%;transform:translateX(-50%)">
</p>
<p>
<img src="https://picsum.photos/id/1/150/100" style="margin-left:50%;transform:translateX(-100%)">
<img src="https://picsum.photos/id/3/150/100" style="transform:translateX(-100%)" >
</p>
<p>
<img src="https://picsum.photos/id/1/150/100" style="margin-left:50%;transform:translateX(-150%)">
<img src="https://picsum.photos/id/3/150/100" style="transform:translateX(-150%)" >
<img src="https://picsum.photos/id/4/150/100" style="transform:translateX(-150%)" >
</p>
Or like below to avoid the wrapping.
<p>
<img src="https://picsum.photos/id/1/150/100" style="margin-left:50%;transform:translateX(-50%);">
</p>
<p>
<img src="https://picsum.photos/id/1/150/100" style="margin-left:50%;transform:translateX(-100%);margin-right:-150px;">
<img src="https://picsum.photos/id/3/150/100" >
</p>
<p>
<img src="https://picsum.photos/id/1/150/100" style="margin-left:50%;transform:translateX(-150%);margin-right:-225px;">
<img src="https://picsum.photos/id/3/150/100" >
<img src="https://picsum.photos/id/4/150/100" >
</p>
You can add one class to p tag parent:
p.image-center{display: flex;align-items: center;justify-content: center;}
Related
I am currently teaching myself HTML / CSS. After some tutorials I am now building my first own project. I try to structure three images and three texts on my page using CSS.
The structure should look like this:
Text - Image
Image - Text
Text - Image.
I tried to position the images with float: right and float: left respectively. But all three images are positioned on the right again and again.
Can you help me? Thank you very much.
<div class="Food">
<div>
<p class="Foodtext">
fvjkhfhikvfdhilvdlhifbikfddbuukubfkuvbduhvdjhvdfkuvhukufvhjkdfuubfdkuhvhukvvhukfdubbf
</p>
</div>
<div>
<img src=speise.jpg alt="Speise" style="float: right">
</div>
</div>
<h3>Wine</h3>
<div class="Wine">
<p class="Winetext">
fhkvbshukveuvbkdfjvbuvfdsfkufbekfbgkrbkfewrrkgbgburfbuehu
</p>
</div>
<div>
<img src="wein.jpg" alt="Weinregal" style="float: left">
</div>
</div>
<h3>Music</h3>
<div class="Music">
<div>
<p class="Musictext"> vbhuireeehugoreiur8hgeoirorguuhghirruhgfuhkgrhukge</p>
</div>
<div>
<img src="dj.jpg" alt="DJ legt auf" style="float: right">
</div>
</div>
You've floated your images inside divs, by themselves. That's like trying to move to the right inside your clothing. Floated images should have the same parent as the content you want to flow around them.
So just combine the divs. You may even want your images inside the paragraphs.
Also, be sure to use a good editor (or at least run your code through an HTML validator). Either will make structural and semantic mistakes obvious.
<div class="Food">
<div>
<p class="Foodtext">
fvjkhfhikvfdhilvdlhifbikfddbuukubfkuvbduhvdjhvdfkuvhukufvhjkdfuubfdkuhvhukvvhukfdubbf
</p>
<img src="https://via.placeholder.com/100" alt="Speise" style="float: right">
</div>
</div>
<h3>Wine</h3>
<div class="Wine">
<p class="Winetext">
fhkvbshukveuvbkdfjvbuvfdsfkufbekfbgkrbkfewrrkgbgburfbuehu
</p>
<img src="https://via.placeholder.com/100" alt="Weinregal" style="float: left">
</div>
<h3>Music</h3>
<div class="Music">
<div>
<p class="Musictext"> vbhuireeehugoreiur8hgeoirorguuhghirruhgfuhkgrhukge</p>
<img src="https://via.placeholder.com/100" alt="DJ legt auf" style="float: right">
</div>
</div>
This is happening because you are styling the image while your image resides inside a new div.
Try this code instead
<div class="Food">
<div>
<p class="Foodtext">
fvjkhfhikvfdhilvdlhifbikfddbuukubfkuvbduhvdjhvdfkuvhukufvhjkdfuubfdkuhvhukvvhukfdubbf
</p>
</div>
<div style="float: right">
<img src=speise.jpg alt="Speise">
</div>
</div>
<h3>Wine</h3>
<div class="Wine">
<p class="Winetext">
fhkvbshukveuvbkdfjvbuvfdsfkufbekfbgkrbkfewrrkgbgburfbuehu
</p>
</div>
<div style="float: left">
<img src="wein.jpg" alt="Weinregal">
</div>
</div>
<h3>Music</h3>
<div class="Music">
<div>
<p class="Musictext"> vbhuireeehugoreiur8hgeoirorguuhghirruhgfuhkgrhukge</p>
</div>
<div style="float: right">
<img src="dj.jpg" alt="DJ legt auf">
</div>
</div>
do this and it should work you might need to specify the max-width of the divs as well and apply 100% width to the image in case you apply max-width, rest this should be working!
I have a page where I'm trying to override the height of the elements on it. I tried defining height, but it won't go below the height of the page as determined by the elements in it.
So how do I set the page at the height I want, regardless of elements?
<div class="entry-content">
<div class="greetings">If
you would like... </div>
<p> </p>
<p> </p>
<p> </p>
<div class="number2">#1</div>
<div class="w">
<center>
</p>
<p style="border:5px;
border-style:solid; border-
color:#fff; padding:
0.5em;"><img class="alignnone size-
medium
wp-image-41" src="http://4309.co.uk/wp-
content/uploads/2020
/04/IMG_2020_112949-
scaled.jpg" alt="" width="95%" height="95%" /></p>
<p>
</center>
</div>
<p> </p>
<p> </p>
<div class="number2">#2</div>
<div class="w">
<center>
</p>
The element defining height here seems to be w. How to get css to ignore that and set height at any height I choose, for example 300px?
At the moment defining height by
.page-id-8122 {height:
300px;}
Doesn't work, but defining height at 800000px does. I'm assuming because there's nothing stopping the page height increasing, but element w is stopping it decreasing?
<body class="page-template-
default page page-id-8122
logged-in admin-bar
no-customize-support wp-
custom-logo cookies-set
cookies-accepted has-
sidebar-right">
<div id="page"
class="site">
<a class="skip-link screen-
reader-text"
href="#content">Skip to
content
</a>
Page here
Html as i wrote it.
<div class="number2">#1</div><div class="w"><center><p style="border:5px; border-style:solid; border-color:#fff; padding: 0.5em;"><img class="alignnone size-medium wp-image-41" src="http://4309.co.uk/wp-content/uploads/2020/04/IMG_20203_112949-scaled.jpg" alt="" width="95%" height="95%" /></p></center></div>
I have a rollover effect over an image which can be seen here: http://www.sdimmigrationlawyers.com/ (bottom of page - deportation image)
I want to add a link to it, but my tag isn't working. How should I implement it to (1) have the rollover effect, and (2) have the link?
CSS:
<div class="view view-sixth">
<img class="alignleft wp-image-335 size-full" alt="" src="http://www.sdimmigrationlawyers.com/wp-content/uploads/2015/06/deportation.jpg">
<a href="http://www.sdimmigrationlawyers.com/immigration-services/deportation-defense">
<div class="mask"></div>
</a>
<p>
</p>
<div class="content">
<h2>Deportation Defense</h2>
</div>
</div>
HTML:
<div class="paragraph_dui_crime_box2">
<h2>San Diego Deportation Lawyer</h2>
<div class="view view-sixth">
<img class="alignleft wp-image-335 size-full" src="http://www.sdimmigrationlawyers.com/wp-content/uploads/2015/06/deportation.jpg" alt="" />
<a href="http://www.sdimmigrationlawyers.com/immigration-services/deportation-defense">
<div class="mask"></div>
</a>
<div class="content">
<h2>Deportation Defense</h2>
</div>
</div>
You could try wrapping the <a> tag around the whole section like so :
<a href="http://www.sdimmigrationlawyers.com/immigration-services/deportation-defense">
<img class="alignleft wp-image-335 size-full" alt="" src="http://www.sdimmigrationlawyers.com/wp-content/uploads/2015/06/deportation.jpg">
<div class="mask"></div>
<p>
</p>
<div class="content">
<h2>Deportation Defense</h2>
</div>
</a>
Your code with the headline "CSS" is HTML, so I assume it's what's the HTML-code of your page.
If you haven't any restrictions in HTML-markup, do the following and make sure that the DIV with the h2 is wrapped in an anchor leading somewhere:
<a href="...">
<div class="content"><h2>Deportation Defense</h2></div>
</a>
Currently, your anchor surrounds something with no content (that is not clickable), the content on the other side is not properly wrapped in an anchor (so it's neither clickable).
I have a simple div with three images in it and Im trying to make all three images separate html links
Am I missing something? This seems too easy, but it surely doesn't work:
<div><img src="img/dboarddown.png"><img src="img/ranking.png"><img src="img/analytics.png"></div>
span doesnt work either....I dont get the pointer and nothing is click-able.
this should work just fine
<div>
<a href="#link1">
<img src="img/dboarddown.png"/>
</a>
<a href="#link2">
<img src="img/ranking.png"/>
</a>
<a href="#link3">
<img src="img/analytics.png"/>
</a>
</div>
you only got one link:
<div>
<img src="img/dboarddown.png">
<img src="img/ranking.png">
<img src="img/analytics.png">
</div>
replace to:
<div>
<img src="img/dboarddown.png" alt="" />
<img src="img/ranking.png" alt="" />
<img src="img/analytics.png" alt="" />
</div>
<div><img src="img/dboarddown.png"/>
<img src="img/ranking.png"/>
<img src="img/analytics.png"/></div>
Last two images are not wrapped in to tag and don't forget to close img tag.
I have a list of icons to be displayed. I am using the following layout to do this:
<div class="icons">
<div class="icon1">
img src="someimage" <p>Some test </p>
</div>
.
.
.
</div>
This is the CSS I am using:
.icons{
margin-top:5px;
margin-left:5px;
left:0;
}
.icon1{
line-height:15px;
margin-top:8px;
width:75px;
}
How do I modify this so that if I add more divs with the class icon1 they will be aligned in a new column when the max-height is reached?
I am unsure whether float:left will work. In my experience this causes the div tags to be added side by side and once they reach the end of the parent div the next one will be added to the bottom of the first column. He requires the opposite #Jack
what i suggest is using jquery to check if the height of your div tags are exceeding the parent div. If they are then add a new div and begin appending your image-div tags to the new div with style="float:left". Thus if your initial DOM contains
< div class="icons" > < /div >
appending one element should change the DOM to
<div class="icons" >
<div class ="column" style="float:left">
<div class="icon1" > <img src="" height="" width="" /> </div>
</div>
</div>
appending another element should change it to
<div class="icons" >
<div class ="column" style="float:left">
<div class="icon1" > <img src="" height="" width="" /> </div>
<div class="icon2" > <img src="" height="" width="" /> </div>
</div>
</div>
appending a third element which exceeds the parent div would change the DOM to this
<div class="icons" >
<div class ="column" style="float:left">
<div class="icon1" > <img src="" height="" width="" /> </div>
<div class="icon2" > <img src="" height="" width="" /> </div>
</div>
<div class ="column" style="float:left">
<div class="icon3" > <img src="" height="" width="" /> </div>
</div>
</div>
You can do this with CSS 'multi-columns',
demo
but it is still a Candidate Recommendation, so the support is still very minimal even though you can use vendor prefixes to get it working(although not without some quirks) on the latest versions of Firefox, Chrome and Opera.