How do i get the text to appear below each image within the carousel? currently it is appearing to the right hand side.
<div class="carousel" data-flickity='{ "fullscreen": true, "lazyLoad": 2, "pageDots": false }'>
<img class="carousel-image" data-flickity-lazyload = 'img src here'
ondblclick="location.href='#'" />
<div class="carousel-cell">text here</div>
</div>
EDIT:
current CSS:
.carousel-image {
display: block;
height: 550px;
min-width: 150px;
max-width: 100%;
margin-right: 50px;
top: 50%;
transform: translateY(-50%);
}
Removed flickity-flock-gibberish, and used a sample image.
Flex will achieve laying out elements easily, and will also take care of centering.
.carousel {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .5em;
border: 1px solid red; /* For testing: remove this */
}
.carousel-image {
display: block;
min-width: 150px;
max-width: 100%;
}
<div class="carousel">
<img class="carousel-image" src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Example_image.png" />
<div class="carousel-cell">text here</div>
</div>
Related
I would like to create a grid with a center svg icon with descriptive text in the button position, like this:
but unfortunately I can not align everything correctly
My code:
.colonna {
flex: 50%;
padding: 10px
}
.icona {
width: 100%
}
.centro-div {
display: flex;
display: -webkit-flex;
align-items: center;
justify-content: center;
}
.icon-64 {
width: 64px;
height: 64px;
}
<div class="riga">
<div class="colonna centro-div">
<div class="icona"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/icon/booking/hotel-booking.svg" alt="Prenota Hotel" class="icon-64"></div>Cerca Hotel</div>
<div class="colonna centro-div"> <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/icon/booking/volo-booking.svg" alt="Prenota Volo" class="icon-64"><br> Cerca Volo</div>
</div>
how can I fix this?
Try with this example,
i have updated some style in your css.
.colonna {
flex: 50%;
padding: 10px;
}
.icona {
width: 100%;
border:2px solid #ddd;
padding:20px;
width:200px;
text-align:center;
}
.icona img{display:block;}
.centro-div {
display: flex;
display: -webkit-flex;
align-items: center;
justify-content: center;
}
.icon-64 {
width: 64px;
height: 64px;
margin:0 auto;
}
<div class="riga">
<div class="colonna centro-div">
<div class="icona">
<img src="https://banner2.kisspng.com/20171220/oqq/rainbow-png-image-5a3ad6797f9c30.14712925151380543352278356.jpg" alt="Prenota Hotel" class="icon-64"/>
<span>Cerca Hotel</span>
</div>
</div>
</
</div>
Hope this will be helpfull for you.
You should use display:flexalso on the row and adjust your html structure just a little:
.riga {display: flex}
.colonna {
flex: 50%;
padding: 10px
}
.icona {
width: 100%
}
.centro-div {
display: flex;
display: -webkit-flex;
align-items: center;
/*justify-content: center;*/
}
.icon-64 {
width: 64px;
height: 64px;
vertical-align:middle
}
<div class="riga">
<div class="colonna centro-div">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/icon/booking/hotel-booking.svg" alt="Prenota Hotel" class="icon-64">
<p>Cerca Hotel</p>
</div>
<div class="colonna centro-div">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/icon/booking/volo-booking.svg" alt="Prenota Volo" class="icon-64">
<p>Cerca Volo</p>
</div>
</div>
Image with text center
If you want the text ti be in the center we can do two simple things to center it
If the text is larger then the image:
We center the image inside its container with margin: 0 auto; and display:block;
see Margin 0 auto
If the text is smaller then the image
We can simply set text-align: center;.
We cant use text-align center alone if the text is larger. This is because it container will grow with the text, but the image will just be left aligned.
/*Divs are by default block displayed. We don't want them to take all width*/
.image-block {
display: inline-block;
padding: 10px;
}
/*text larger then container*/
.image-block img {
display: block;
margin: 0 auto;
}
/*Container smaller then text*/
.image-block .text {
text-align: center;
}
<div>
<div class="image-block">
<img src="https://picsum.photos/100" />
<div class="text">Image text below image</div>
</div>
<div class="image-block">
<img src="https://picsum.photos/100" />
<div class="text">desc</div>
</div>
</div>
The child is centering horizontally, but not vertically. I think it is because the example-container needs a height set. What if I want it centered on the entire page?
Please see the below code-snippet
.example-container {
display: flex;
align-items: center;
justify-content: center;
}
.example-child {
width: 100px;
height: 100px;
background-color: orange;
}
<div class="example-container">
<div class="example-child">
<p>Sample Content...</p>
</div>
</div>
It's height will only be as big as the child by default. Add height: 100vh or whatever works for your layout.
body { margin: 0; }
.example-container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.example-child {
width: 100px;
height: 100px;
background-color: orange;
}
<div class="example-container">
<div class="example-child">
<p>Sample Content...</p>
</div>
</div>
Centering a single child div horizontally and vertically on the page
It can be done with less markup and wider browser support by using transform instead of flexbox
.example-container {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
width: 100px;
height: 100px;
background-color: orange;
}
<div class="example-container">
<p>Sample Content...</p>
</div>
I'm trying to align an image in the center of the page while also aligning some text to the right of the image. How would I do this in either css or html?
Here is my current attempt at this:
.center-img {
display: inline-block;
margin: 0 auto;
}
.center-txt {
display: inline-block;
}
<img src="http://placehold.it/350x150" class="center-img"/>
<div class="center-txt">
<h1>Home</h1>
</div>
Right now the image is not centered and the text is not centered vertically with the image
Here is a visual representation of what I would like it to look like in the end:
Solution 1:
You can use a div to wrap the image and the text in and use text-align: center along with vertical-align: middle.
.center-img,
.center-txt {
display: inline-block;
vertical-align: middle;
}
#wrapper {
text-align: center;
border: 1px solid red;
}
<div id="wrapper">
<img src="http://placehold.it/100x100" class="center-img" />
<div class="center-txt">
<h1>Home</h1>
</div>
</div>
Solution 2:
Alternatively, you can use a div to wrap the image and the text in and use flexbox. Use justify-content to center your elements horizontally and align-items: center to align them vertically.
.center-img,
.center-txt {
display: inline-block;
}
#wrapper {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid red;
}
<div id="wrapper">
<img src="http://placehold.it/100x100" class="center-img" />
<div class="center-txt">
<h1>Home</h1>
</div>
</div>
Now to center the above wrapper to the middle of the screen you can use:
#wrapper {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Example:
.center-img,
.center-txt {
display: inline-block;
}
#wrapper {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid red;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id="wrapper">
<img src="http://placehold.it/100x100" class="center-img" />
<div class="center-txt">
<h1>Home</h1>
</div>
</div>
We have a wrapper - div. Div have size 100% width and height of viewport. I give background to div pics and linear-gradient for darken. Div is a flex-block. Inner content aligned to center with justify-content (horizontal) and align-items (vertical). Its all.
ps: Sorry, sorry. Not its all. We go to drink a beer with this ladies. :)))
* {
padding: 0;
margin: 0;
}
div {
background-image: linear-gradient(rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .8) 100%), url("http://beerhold.it/600/400");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
img {
margin-right: 1em;
}
<div class="wrapper">
<img src="http://beerhold.it/100/100">
<p>Lorem ipsum</p>
</div>
To center the image use
img.center{
display:block;
margin:0 auto;
}
wrap both image and text inside a container and add display:flex to it.
then, to center them use align-items: center; and justify-content: center;
see below snippet. let me know if it works for you
for more info about how to center vertically see here -> Vertical Centering with Flexbox
.center-img {
display: inline-block;
margin: 0 auto;
}
.center-txt {
display: inline-block;
}
.container {
width:500px;
height:500px;
border:2px solid red;
display: flex;
align-items: center;
justify-content: center;padding:0 15px;}
<div class="container">
<img src="http://placehold.it/350x150" class="center-img"/>
<div class="center-txt">
<h1>Home</h1>
</div>
</div>
Just add vertical-align: middle; to class center-img
The vertical-align property sets the vertical alignment of an element.
Using middle place it in the middle of the parent element
.center-img {
display: inline-block;
margin: 0 auto;
vertical-align: middle;
}
.center-txt {
display: inline-block;
}
<img src="http://placehold.it/350x150" class="center-img"/>
<div class="center-txt">
<h1>Home</h1>
</div>
Use this-
<div>
<img style="vertical-align:middle" src="https://placehold.it/60x60">
<span style="">Right Vertical aligned text</span>
</div>
Refer to this link.
<div class="container">
<img src="img.jpg"/>
<div class="text">
text
</div>
</div>
.container{
text-align:center;
}
img, .text{
display:inline-block;
}
Like this: https://jsfiddle.net/jn4rktaa/
HTML:
<div class="outside">
<div class="inside">
<img src='/img/file.jpg' class="img" />
Test Text
</div>
</div>
CSS:
.outside {
width: 800px;
height: 600px;
border: 1px solid red;
position: relative;
}
.inside {
position: relative;
width: 200px;
height: 200px;
border: 1px solid blue;
margin: 0 auto;
top: calc(50% - 100px); /* THE VALUE (100PX) SHOULD BE HALF OF YOUR ELEMENT'S HEIGHT */
}
.img {
float: left;
}
I am unable to get one of my images to line up correctly. I have done most of the align vertical-align: middle; and display display: block;options to remove the bottom padding. I have also set the container to width: 100%; as well as the image width: 100%; so it should be responsive. I'm not sure what is causing this image to have the gap. I have set the background color to yellow so it shows the area that needs to be filled in. I have also commented out all of the alternative options I attempted with no success.
Example:
* {
box-sizing: border-box;
font-size: 100%;
}
.container {
display: flex;
flex-direction: column;
max-width: 90%;
margin: 0 auto;
background-color: white;
}
.img__container {
display: flex;
/* justify-content: space-between; */
align-content: center;
background: yellow;
}
a .img_item {
width: 100%;
height: auto;
vertical-align: middle;
/* display: block; */
/* flex-grow: 1;
flex-shrink: 0;
flex-basis: auto; */
}
.img_item_1,
.img_item_3,
.img_item_2 {
width: 33.33%;
}
.img_item_4,
.img_item_5 {
width: 50%;
}
.img_item img {
vertical-align: middle;
/* display: block; */
max-width: 100%;
}
<div class="container">
<div class="img__container">
<img src="https://images.unsplash.com/photo-1460626399219-57a00a2361cb?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=ea8025ac5c503a77aaf3197534af535b" alt="">
<img src="https://images.unsplash.com/photo-1460400355256-e87506dcec4f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=65ebb274e22b4db0f6cef789563020c5" alt="">
<img src="https://images.unsplash.com/photo-1453668069544-b8dbea7a0477?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=3693c161a8cf1e3299c913eede08005a" alt="">
</div>
<div class="img__container">
<img src="https://images.unsplash.com/photo-1428189923803-e9801d464d76?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=467ee7b8a091aa5cb8bc9b496aada853" alt="">
<img src="https://images.unsplash.com/photo-1458724338480-79bc7a8352e4?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=0e8fe82e7f50091319fdc635582bf62d" alt="">
</div>
<div class="img__container">
<img src="https://images.unsplash.com/photo-1421749810611-438cc492b581?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=072549d9d9ee6a1f78d91081068c6ad1" alt="">
<img src="https://images.unsplash.com/photo-1433190152045-5a94184895da?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=57115141c5d099ff83a0aa55c0b219a9" alt="">
</div>
</div>
The problem is you're trying to fit images of different width to height ratios into boxes of the same size (I say images because it also appears your first top two images have a 1 pixel gap at the bottom.)
Your options are:
Crop all images to the same size at the CMS end.
or
Attach your images as inline background images and in your CSS file set the background-size to cover and background-position to center center. Some other things you'll need to adjust as well. If you're interested in this approach, let me know in the comments and I can edit my answer with a snippet.
EDIT
Background image (for the sake of brevity I only did the one):
* {
box-sizing: border-box;
font-size: 100%;
}
.container {
display: flex;
flex-direction: column;
max-width: 90%;
margin: 0 auto;
background-color: white;
}
.img__container {
display: flex;
align-content: center;
background: yellow;
}
.img_item {
background-size: cover;
background-position: center center;
}
.img_item_4,
.img_item_5 {
width: 50%;
}
.img_item img {
vertical-align: middle;
max-width: 100%;
}
<div class="container">
<div class="img__container">
<img src="https://images.unsplash.com/photo-1460626399219-57a00a2361cb?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=ea8025ac5c503a77aaf3197534af535b" alt="">
<img src="https://images.unsplash.com/photo-1460400355256-e87506dcec4f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=65ebb274e22b4db0f6cef789563020c5" alt="">
<img src="https://images.unsplash.com/photo-1453668069544-b8dbea7a0477?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=3693c161a8cf1e3299c913eede08005a" alt="">
</div>
<div class="img__container">
<img src="https://images.unsplash.com/photo-1458724338480-79bc7a8352e4?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=0e8fe82e7f50091319fdc635582bf62d" alt="">
</div>
<div class="img__container">
<img src="https://images.unsplash.com/photo-1421749810611-438cc492b581?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=072549d9d9ee6a1f78d91081068c6ad1" alt="">
<img src="https://images.unsplash.com/photo-1433190152045-5a94184895da?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=57115141c5d099ff83a0aa55c0b219a9" alt="">
</div>
</div>
EDIT 2
* {
box-sizing: border-box;
font-size: 100%;
}
.container {
display: flex;
flex-direction: column;
max-width: 90%;
margin: 0 auto;
background-color: white;
}
.img__container {
display: flex;
align-content: center;
background: yellow;
}
.img_item {
background-size: cover;
background-position: center center;
}
.img_item_1,
.img_item_2,
.img_item_3 {
padding-bottom: 22%;
width: 33.333%;
}
.img_item_4,
.img_item_5,
.img_item_6,
.img_item_7 {
padding-bottom: 33.333%;
width: 50%;
}
.img_item img {
vertical-align: middle;
max-width: 100%;
}
<div class="container">
<div class="img__container">
</div>
<div class="img__container">
</div>
<div class="img__container">
</div>
</div>
First issue
I have photo gallery on my page. If you click on photo you can see larger preview. Because I need to deal with mobile phones so I set:
.overview img {
height: auto;
width: 90%;
}
But I have problem. img height exceeds height of .overview.I need to cut off ends of img or some other way to solve problem.
PEN - http://codepen.io/marekkobida/pen/yOPeXO
HTML:
<div class="dark" id="photo-gallery">
<div class="container">
<h1>A</h1>
<p>B</p>
<div class="photos">
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
</div>
<div class="overview">
<img src="">
</div>
</div>
</div>
CSS:
.container {
margin-left: auto;
margin-right: auto;
padding: 8rem 1.25rem;
text-align: center;
}
#media (min-width: 65rem) {
.container {
width: 60rem;
}
}
#photo-gallery {
position: relative;
}
#photo-gallery .photos {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-bottom: -0.625rem;
margin-top: 0.625rem;
}
#photo-gallery .photos > div {
border: 1px solid;
flex: 0 0 210px;
height: 210px;
margin: 0.625rem;
}
#photo-gallery .overview {
align-items: center;
background: #23282d;
display: none;
height: 100%;
justify-content: center;
left: 0;
position: absolute;
top: 0;
}
#photo-gallery .overview img {
height: auto;
width: 90%;
}
Second issue
I want to remove background of .overview and replace it with a blurred effect. (example: filter: blur(5px);)
The problem is that when I apply blurred effect on gallery that .overview is blurry too.
Your first issue can be solved by giving max-height: 100% to the img
#photo-gallery .overview img {
height: auto;
width: 90%;
max-height: 100%;
}
see this PEN
for the second question,
When using the blur or opacity property, it is not possible to ignore
the child element. If you apply either of those properties to parent
element, it will automatically apply to child elements too.
You have to go for alternate solutions,
see this How to blur(css) div without blur child element