Image and text not vertical align to middle - html

I tried many "Display" param in CSS and seem none able to set a proper alignment, please help me to solve it.
<div id="fadeshow2toggler" style="text-align:center; width:290px;">
<img src="http://i31.tinypic.com/302rn5v.png"/>
<div class="status">1 of 1</div>
<img src="http://i30.tinypic.com/lzkux.png"/>
</div>


Display will not set any allignment.
This may be what you need.
<style type="text/css">
.prev, .next, .status{float:left;}
</style>


try this:
<center>
<div id="fadeshow2toggler" style="text-align:center; width:290px;">
<img src="http://i31.tinypic.com/302rn5v.png"/>
<div class="status">1 of 1</div>
<img src="http://i30.tinypic.com/lzkux.png"/>
</div>
</center>


Can you modify the HTML? If so, add a container for the two anchors and the div like this
<div id="fadeshow2toggler" style="width:290px;">
<div class="linkscontainer">
<img src="http://i31.tinypic.com/302rn5v.png"/>
<div class="status">1 of 1</div>
<img src="http://i30.tinypic.com/lzkux.png"/>
</div>
</div>
And use this CSS
.linkscontainer{
margin:0px auto;
min-width:50%;
}
.status{
display:inline;
}

Related

How to expand a DIV vertically without affecting other DIVs around? [duplicate]

This question already has answers here:
Floated elements of variable height push siblings down
(3 answers)
Closed 4 years ago.
I'm trying to expand a DIV in a set of given DIVs for an image gallery, the issue I get is when I expend the specific DIV all the next ones get affected and move their positions which lets a big blank space that I don't want.
I tried the following CSS properties on the specific DIVs and none of them worked out so far :
height: 250px;
margin-bottom: 100px;
The css :
.thumb{
float:left;
margin:5px;
}
#gallery{
width:850px;
}
The html :
<html>
<head>
<title>asd</title>
</head>
<body>
<div id="gallery">
<div class="thumb">
<img src="https://picsum.photos/155/155?image=0">
</div>
<div class="thumb">
<img src="https://picsum.photos/155/155?image=100">
</div>
<div class="thumb" style="height:250px;"> <!-- specific DIV to expand vertically !-->
<img src="https://picsum.photos/155/155?image=200">
</div>
<div class="thumb">
<img src="https://picsum.photos/155/155?image=350">
</div>
<div class="thumb">
<img src="https://picsum.photos/155/155?image=400">
</div>
<div class="thumb">
<img src="https://picsum.photos/155/155?image=500">
</div>
<div class="thumb">
<img src="https://picsum.photos/155/155?image=600">
</div>
<div class="thumb">
<img src="https://picsum.photos/155/155?image=700">
</div>
<div class="thumb">
<img src="https://picsum.photos/155/155?image=800">
</div>
<div class="thumb">
<img src="https://picsum.photos/155/155?image=900">
</div>
<div class="thumb">
<img src="https://picsum.photos/155/155?image=950">
</div>
<div class="thumb">
<img src="https://picsum.photos/155/155?image=990">
</div>
</div>
</body>
</html>
The result I'm getting :
The end result I want :
I made the fiddle so you can better see what's happening : https://jsfiddle.net/537ayfwc/
I found a workaround by adding an invisible DIV that would act as a seperating line after every 5 pics but I'm trying to find a way to do without it as it adds more constraints to the future javascript animations I would like to perform on the whole gallery.

Not sure if this is what you're looking for.
.thumb{
float:left;
margin:5px;
}
#gallery{
width:850px;
display: flex;
flex-wrap: wrap;
}

Show several images in one div

How to show several images in one div using css and html?
Ex: https://www.awesomescreenshot.com/image/3066306/6f04718aa19dcc4b88192304a0f9a307 .
Here what I have done so far:
<body>
<div class="deck">
<img src="https://image.tmdb.org/t/p/w220_and_h330_bestv2/kXlrGioGfFKOvibpsPzzGx16cP2.jpg" alt="testimage">
<img src="https://image.tmdb.org/t/p/w220_and_h330_bestv2/zzfwhweu5reCv2Loqzon7Q5WAd5.jpg" alt="testimage">
<img src="https://image.tmdb.org/t/p/w220_and_h330_bestv2/sGuZHYvu0mXeQCwvJ5yzk2Yoytq.jpg" alt="testimage">
<img src="https://image.tmdb.org/t/p/w220_and_h330_bestv2/4Ar01t6sW1ZZBcbz2R1wqjzIBdr.jpg" alt="testimage">
</div>
</body>
https://jsfiddle.net/wa9gfgvz/

Can you try this?
.deck{
display:block;
width:100%;
}
.deck img{
width:50%;
float:left;
}
Refer: JSFiddle

Separate the images in two different divs and put that divs inside a main div, then if you want, you can center the ContainerDiv or do whatever with that, and the content will be always two images per row. But I suggest to use bootstrap to this kind of feature, but, anyways, here it come:
<div class='ContainerDiv'>
<div class="deck">
<img src="https://image.tmdb.org/t/p/w220_and_h330_bestv2/kXlrGioGfFKOvibpsPzzGx16cP2.jpg" alt="testimage">
<img src="https://image.tmdb.org/t/p/w220_and_h330_bestv2/zzfwhweu5reCv2Loqzon7Q5WAd5.jpg" alt="testimage">
</div>
<div class="deck">
<img src="https://image.tmdb.org/t/p/w220_and_h330_bestv2/sGuZHYvu0mXeQCwvJ5yzk2Yoytq.jpg" alt="testimage">
<img src="https://image.tmdb.org/t/p/w220_and_h330_bestv2/4Ar01t6sW1ZZBcbz2R1wqjzIBdr.jpg" alt="testimage">
</div>
</div>
CSS:
.deck{
display:flex;
}
Fiddle: https://jsfiddle.net/prtanruz/

How to place two elements side by side in one div? [duplicate]

This question already has answers here:
Float 2 elements side by side inside a container div
(2 answers)
Closed 3 years ago.
I have loop that goes trough all pictures that I have and displays them. I would like to display them in one row, from left to right, but with css that I have is displaying them one under other. I have use flow but not sure if I used it correctly.
Here is my code:
.column.is-narrow {
float: right;
}
.box {
float: right;
}
<div class="column">
<div class="columns" ng-repeat="a in $ctrl.f">
<div class="column is-narrow">
<div class="box" style="width: 200px;">
<p class="title is-5">{{album}}</p>
<figure class="image is-128x128">
<!--<img ng-src="{{src}}"> remove and replaced for demo purpose-->
<img src="http://dummyimage.com/128x128" />
</figure>
<p class="subtitle">{{person}}</p>
</div>
</div>
</div>
I am aware that my css is not correct I have been searching for answer but couldn't find it.

Basically, when you float things, they'll still wrap if there isn't enough space to display both side by side. The easiest solution is to set a width on them to ensure that their container will always be wide enough to fit the content. You can do it with percentages or pixels, depending on your use case.
Note: If you use percentages, percentages adding up to 100% may still cause it to wrap, because they may not take into account padding, margin and/or border depending on other things. I usually do something like 49% for both, then float one right and one left.

You may use display and mind this inline-style <div class="box" style="width: 200px;"> wich is to start with, not wide enough to hold texts and img side by side
display:table/table-cell;
.column.is-narrow {
float: right;
}
.box {display:table;}
.box> p, .box> figure {display:table-cell;vertical-align:middle/* or top or else */
}
<div class="column">
<div class="columns" ng-repeat="a in $ctrl.f">
<div class="column is-narrow">
<div class="box" style="width: 200px;">
<p class="title is-5">{{album}}</p>
<figure class="image is-128x128">
<!--<img ng-src="{{src}}"> remove and replaced for demo purpose-->
<img src="http://dummyimage.com/128x128" />
</figure>
<p class="subtitle">{{person}}</p>
</div>
</div>
</div>
display:flex;
.column.is-narrow {
float: right;
}
.box {
display: flex;
/* removed width:200px from inline-style*/
}
p {
margin: auto;
}
<div class="column">
<div class="columns" ng-repeat="a in $ctrl.f">
<div class="column is-narrow">
<div class="box">
<p class="title is-5">{{album}}</p>
<figure class="image is-128x128">
<!--<img ng-src="{{src}}"> remove and replaced for demo purpose-->
<img src="http://dummyimage.com/128x128" />
</figure>
<p class="subtitle">{{person}}</p>
</div>
</div>
</div>

The easiest way is to declare the parent div as a flex container by setting the property display: flex and flex-direction:row. If you don't want to wrap your pictures, you can set flex-wrap:nowrap.
Here http://the-echoplex.net/flexyboxes/ is nice playground for flex box.

So I found the answer and it was pretty simple :)
I just had to add one more div with class with which I will float it to left. This is what I wanted:
.html
<div class="column">
<div class="columns">
<div class="float" ng-repeat="a in $ctrl.f"> /* added this line of code */
<div class="column is-narrow">
<div class="box" style="width: 200px;">
<p class="title is-5">{{album}}</p>
<figure class="image is-128x128">
<!--<img ng-src="{{src}}"> remove and replaced for demo purpose-->
<img src="http://dummyimage.com/128x128" />
</figure>
</div>
</div>
<p class="subtitle">{{person}}</p>
</div>
</div>
</div>
.css
.float{
float:left;
}
That was it. It's working. :)

HTML Marquee between 2 divs?

I've got a website with images tot he left and right in their own divs, one with float:right and one with float:left.
I also have an image that travels across the screen with the marquee tag.
Is there any way to get the marquee between the divs? So basically it would start at the left side of the right images and start to disappear on the right side of the left images.
If you don't get what I'm on about, here's an example page: http://benjiworld.ueuo.com/Example.html and as you can see, the marquee just appears underneath both divs, even when there's enough space for the marqueeing image between the divs.
This is my code for the test site:
<!DOCTYPE html>
<head>
<title>Example</title>
</head>
<body>
<div style="float:left; width:350px">
<img src="Jaffa.png">
<img src="Jaffa.png">
<img src="Jaffa.png">
</div>
<div style="float:right; width:350px" >
<img src="Jaffa.png">
<img src="Jaffa.png">
<img src="Jaffa.png">
</div>
<p style="text-align: center">
<marquee><img src="Hobnobs.jpg"></marquee>
</p>
Can anybody help? I really don't know how to sort it out, I've tried putting the marquee in a div in the centre but it didn't work either.

you can use position:absolute as I did:
.left,.right,.center{
position:absolute;
top:0;
}
.left,.right{
width:200px;
height:300px;
background-color:orange;
}
.center{
left:200px;
right:200px;
}
.left{
left:0;
}
.right{
right:0;
}
<div class="right">right</div>
<div class="left">left</div>
<div class="center">
<marquee>
<img src="http://www.w3.org/html/logo/downloads/HTML5_Badge_256.png" alt="">
</marquee>
</div>
here is the jsfiddle : http://jsfiddle.net/78pgca5o/

Just give a style as float:left to paragraph tag
Just like below
<p style="text-align: center;float:left">
<marquee><img src="Hobnobs.jpg"></marquee>
</p>

Try this:
<!DOCTYPE html>
<head>
<title>Example</title>
</head>
<body>
<div style="float:left; width:50px">
<img src="http://benjiworld.ueuo.com/Jaffa.png">
<img src="http://benjiworld.ueuo.com/Jaffa.png">
<img src="http://benjiworld.ueuo.com/Jaffa.png">
</div>
<div style="float:right; width:50px" >
<img src="http://benjiworld.ueuo.com/Jaffa.png">
<img src="http://benjiworld.ueuo.com/Jaffa.png">
<img src="http://benjiworld.ueuo.com/Jaffa.png">
</div>
<p style="text-align: center; position: absolute; z-index: -1; width: 100%">
<marquee><img src="http://benjiworld.ueuo.com/Hobnobs.jpg"></marquee>
</p>

is possible to swap two elements by css?

I need to swap two elements by using css. My html is here:
<div class="container">
<div class="Div2">
<img src="Div2.jpg">
</div>
<div class="Div1">
<img src="Div1.jpg">
</div>
</div>
and my css is here:
.container{width:50%; margin:auto;}
.div2{float:left;width:100%;}
.div1{float:left;width:100%;}
is there any way how to put Div1 on the position of Div2 only with css without changing html?

Float .div2 to the right, and .div1 to the left:
.div2{ float:right; }
.div1{ float:left; }
You'll also have to remove the width: 100%; if you're attempting to stack them side by side.
Also, classes are case-senstive. In your example code, your div classes are .Div1 and .Div2, make sure to use all lowercase classes to match the definitions:
<div class="container">
<div class="div2">
<img src="Div2.jpg">
</div>
<div class="div1">
<img src="Div1.jpg">
</div>
</div>
Example: http://jsfiddle.net/dph8t/