I have a div with a fixed position containing an image that I have set to max-width:20% so it is scaled down. The height of the div is scaled to match the image but the width isn't, it looks like it's the same width of the initial size of the image.
I might be missing something fundamental but can't really understand this.
#logo {
max-width: 20%;
}
#logoholder {
position: fixed;
left: 10px;
top: 120px;
background: rgb(47 47 47 / 36%);
text-align: center;
}
#logo2 {
max-width: 77px;
}
#logoholder2 {
position: fixed;
width: 77px;
height: 77px;
left: 10px;
top: 30px;
background: rgb(47 47 47 / 36%);
text-align: center;
}
<div id="logoholder">
<img id="logo" src="https://www.google.com/gmail/about/static-2.0/images/logo-gmail.png">
</div>
<-- Expected result -->
<div id="logoholder2">
<img id="logo2" src="https://www.google.com/gmail/about/static-2.0/images/logo-gmail.png">
</div>
#logo{
max-width:100px;
}
#logoholder {
position: fixed;
left:0;
top:0;
background: rgb(47 47 47 / 36%);
}
<div id="logoholder">
<img id="logo" src="https://www.google.com/gmail/about/static-2.0/images/logo-gmail.png">
</div>
The max-width using a percentage is causing weird behaviour, changed it to px.
I set some margins and borders for clarity - and left the original images in place (the first one is the one in play here)
I would suggest using a flex display for simplicity then we can set the container to a size and the height of the image to what we want relative to that (see comments in the CSS)
I set the button at the "top" but it could be relative position also and work around that "fixed" position issue.
body {
margin: 0;
}
#logoholder {
position: relative;
left: 10px;
top: 1rem;
/* background: rgb(47 47 47 / 36%);*/
/* light violet background */
background-color: #8080FF20;
}
#logo {
max-width: 20%;
}
#logoholder2 {
position: relative;
left: 10px;
top: 30px;
*/ width: 77px;
height: 77px;
/* light cyan background */
background-color: #20E0E020;
}
#logo2 {
max-width: 77px;
}
/* set up the blocks to keep the "gray" one at the top */
.container-all {
display: flex;
align-items: cemter;
justify-content: cemter;
/*stack then for this demo */
flex-direction: column;
/* the "lime" border around all the content */
border: solid 1px #88ff88;
}
.container-all .content-container {
margin: 0.5rem;
/* get our logo (first container) at the top if we want to */
/* margin-top:0;*/
}
.logo-container {
/* keep logo/button at top when scrolling for this demo */
align-self: flex-start;
position: sticky;
top: 0;
/* set up this containers display */
display: flex;
justify-content: center;
align-items: center;
}
.logo-container .content-item {
/* controls the height of the image on the button */
/* these should be the same since the "default" is 16px font-size == 1rem */
font-size: 1rem;
/* font-size:16px;*/
}
.logo-image {
/* controlled by container font size as these have em */
/* so if 1rem = 16px this 4em would be 16 X 5=80px */
height: 5em;
}
.content-container {
text-align: center;
border: 1px solid blue;
object-fit: contain;
}
.content-container:first-of-type {
/* light gray background for this demo */
/* alpha transparency information into the hex format for colors 2E as this has 8 characters */
background-color: #8080802E;
border: outset #D0D0D02E 4px;
}
.content-item {
border: dashed #00000044 1px;
padding: 0.25rem;
margin: 0.25rem;
}
.content-container .content-item .big-me:last-of-type {
height: 20rem;
}
<div class="container-all">
<div class="logo-container content-container">
<button type="button" class="content-item">
<img class="logo-image" src="https://www.google.com/gmail/about/static-2.0/images/logo-gmail.png">
</button>
</div>
<div class="content-container">
<div class="content-item">
Below here just to force scrolling on the sticky icon
</div>
</div>
<div id="logoholder" class="xcontent-container">
<div class="content-item">
<img id="logo" src="https://www.google.com/gmail/about/static-2.0/images/logo-gmail.png">
</div>
</div>
<div class="content-container">
<div class="content-item">
<-- Expected result -->
</div>
</div>
<div id="logoholder2" class="content-container">
<div class="content-item">
<img id="logo2" src="https://www.google.com/gmail/about/static-2.0/images/logo-gmail.png">
</div>
</div>
<div class="content-container">
<div class="content-item">
<div class="big-me">I am big so I can force the scroll.
</div>
</div>
</div>
</div>
The overlay image in the example below is supposed to stay at the same location relative to the larger image independent of the size of the container.
I added 2 examples below of the "img_overlay" CSS module, one where it is inside a portrait test container (green), and another inside a green landscape container. It works fine for portrait, but not for landscape, because the "img_overlay__container" (red) extends to the whole width of the parent container instead of being limited to the width of the black image. If the red container would be as wide as the black image then everything would be OK.
I can make it work for landscape too with a simple inline-block, but then it breaks for portrait.
Mind that the image should be flexible, expanding and shrinking according to the available space, up to its natural size, so no fixed size solutions please. And the overlay image should retain its size ratio in relation to the black image (25% of the black image), so that it looks the same independent of screen size.
I should add that I am testing on Chrome Version 59.0.3071.115 (Official Build)
(64-bit)
Am I missing something or is it simply not possible with current CSS3?
Edit (14/07/2017): I made the containers resizable so its easier to test.
https://jsfiddle.net/rvmxpwq1/3/
$( ".test" ).resizable();
body {
margin-bottom: 100vh;
}
.img_overlay {
display: inline-flex;
max-height: 100%;
}
.img_overlay__container {
position: relative;
background-color: rgb(255, 0, 0);
}
.img_overlay__img {
border-radius: 50%;
max-height: 100%;
max-width: 100%;
}
.img_overlay__overlay {
border-radius: 50%;
max-width: 25%;
max-height: 25%;
position: absolute;
right: 0px;
bottom: 0px;
}
.test {
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(0, 255, 0);
border: 3px solid rgb(0, 255, 0);
}
.test--1 {
width: 200px;
height: 300px;
}
.test--2 {
width: 300px;
height: 200px;
}
.test--3 {
width: 500px;
height: 500px;
}
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Portrait container (300x200): <strong>works</strong>, this is how it should always look at any container size.
<div class="test test--1">
<div class="img_overlay">
<div class="img_overlay__container">
<img class="img_overlay__img" src="https://dummyimage.com/400x400/000/ffffff.jpg&text=Image">
<img class="img_overlay__overlay" src="https://dummyimage.com/100x100/0000ff/ffffff.jpg&text=Overlay">
</div>
</div>
</div>
<br> Landscape container (200x300): <strong>does not work</strong>, because the overlay is not next to the image.
<div class="test test--2">
<div class="img_overlay">
<div class="img_overlay__container">
<img class="img_overlay__img" src="https://dummyimage.com/400x400/000/ffffff.jpg&text=Image">
<img class="img_overlay__overlay" src="https://dummyimage.com/100x100/0000ff/ffffff.jpg&text=Overlay">
</div>
</div>
</div>
<br> Large container (500x500): <strong>works</strong>, the images are not enlarged above their natural size.
<div class="test test--3">
<div class="img_overlay">
<div class="img_overlay__container">
<img class="img_overlay__img" src="https://dummyimage.com/400x400/000/ffffff.jpg&text=Image">
<img class="img_overlay__overlay" src="https://dummyimage.com/100x100/0000ff/ffffff.jpg&text=Overlay">
</div>
</div>
</div>
How about now?
here is a fiddle:
https://jsfiddle.net/f9e2gkpk/5/
.wrapper{
max-height: 100%;
max-width: 100%;
}
.img_overlay {
display: inline-flex;
max-height: 100%;
}
.img_overlay__container {
position: relative;
background-color: rgb(255, 0, 0)
}
.img_overlay__img {
border-radius: 50%;
max-height: 100vh;
max-width: 100%;
}
.img_overlay__overlay {
border-radius: 50%;
width: 25%;
position: absolute;
right: 0px;
bottom: 0px;
}
.test {
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(0, 255, 0);
border: 3px solid rgb(0, 255, 0);
height: 100vh;
}
<div class="test test--2">
<div class="img_overlay">
<div class="img_overlay__container">
<div class="wrapper">
<img class="img_overlay__img" src="https://dummyimage.com/400x400/000/ffffff.jpg&text=Image">
<img class="img_overlay__overlay" src="https://dummyimage.com/100x100/0000ff/ffffff.jpg&text=Overlay">
</div>
</div>
</div>
</div>
How can I center align (horizontally) an image inside its container div?
Here's the HTML and CSS. I have also included the CSS for the other elements of the thumbnail. It runs in descending order so the highest element is the container of everything and the lowest is inside everything.
#thumbnailwrapper {
color: #2A2A2A;
margin-right: 5px;
border-radius: 0.2em;
margin-bottom: 5px;
background-color: #E9F7FE;
padding: 5px;
border: thin solid #DADADA;
font-size: 15px
}
#artiststhumbnail {
width: 120px;
height: 108px;
overflow: hidden;
border: thin solid #DADADA;
background-color: white;
}
#artiststhumbnail:hover {
left: 50px
}
<!--link here-->
<a href="NotByDesign">
<div id="thumbnailwrapper">
<a href="NotByDesign">
<!--name here-->
<b>Not By Design</b>
<br>
<div id="artiststhumbnail">
<a href="NotByDesign">
<!--image here-->
<img src="../files/noprofile.jpg" height="100%" alt="Not By Design" border="1" />
</a>
</div>
<div id="genre">Punk</div>
</div>
Okay, I have added the markup without the PHP in so should be easier to see. Neither solution seems to work in practice. The text at top and bottom cannot be centered and the image should be centered within its container div. The container has overflow hidden so I want to see the center of the image as that's normally where the focus is.
#artiststhumbnail a img {
display:block;
margin:auto;
}
Here's my solution in: http://jsfiddle.net/marvo/3k3CC/2/
CSS flexbox can do it with justify-content: center on the image parent element. To preserve the aspect ratio of the image, add align-self: flex-start; to it.
HTML
<div class="image-container">
<img src="http://placehold.it/100x100" />
</div>
CSS
.image-container {
display: flex;
justify-content: center;
}
Output:
body {
background: lightgray;
}
.image-container {
width: 200px;
display: flex;
justify-content: center;
margin: 10px;
padding: 10px;
/* Material design properties */
background: #fff;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.image-2 {
width: 500px;
align-self: flex-start; /* to preserve image aspect ratio */
}
.image-3 {
width: 300px;
align-self: flex-start; /* to preserve image aspect ratio */
}
<div class="image-container">
<img src="http://placehold.it/100x100" />
</div>
<div class="image-container image-2">
<img src="http://placehold.it/100x100/333" />
</div>
<div class="image-container image-3">
<img src="http://placehold.it/100x100/666" />
</div>
I just found this solution below on the W3 CSS page and it answered my problem.
img {
display: block;
margin-left: auto;
margin-right: auto;
}
Source: http://www.w3.org/Style/Examples/007/center.en.html
This also would do it
#imagewrapper {
text-align:center;
}
#imagewrapper img {
display:inline-block;
margin:0 5px;
}
The best thing I have found (that seems to work in all browsers) for centering an image, or any element, horizontally is to create a CSS class and include the following parameters:
CSS
.center {
position: relative; /* where the next element will be automatically positioned */
display: inline-block; /* causes element width to shrink to fit content */
left: 50%; /* moves left side of image/element to center of parent element */
transform: translate(-50%); /* centers image/element on "left: 50%" position */
}
You can then apply the CSS class you created to your tag as follows:
HTML
<img class="center" src="image.jpg" />
You can also inline the CSS in your element(s) by doing the following:
<img style="position: relative; display: inline-block; left: 50%; transform: translate(-50%);" src ="image.jpg" />
...but I wouldn't recommend writing CSS inline because then you have to make multiple changes in all your tags using your centering CSS code if you ever want to change the style.
This is what I ended up doing:
<div style="height: 600px">
<img src="assets/zzzzz.png" alt="Error" style="max-width: 100%;
max-height: 100%; display:block; margin:auto;" />
</div>
Which will limit the image height to 600px and will horizontally-center (or resize down if the parent width is smaller) to the parent container, maintaining proportions.
I am going to go out on a limb and say that the following is what you are after.
Note, the following I believe was accidentally omitted in the question (see comment):
<div id="thumbnailwrapper"> <!-- <<< This opening element -->
<div id="artiststhumbnail">
...
So what you need is:
#artiststhumbnail {
width:120px;
height:108px;
margin: 0 auto; /* <<< This line here. */
...
}
http://jsfiddle.net/userdude/XStjX/3/
yeah, the code like this work fine
<div>
<img/>
</div>
but just to remind u, the style for image
object-fit : *depend on u*
so the final code be like Example
div {
display: flex;
justify-content: center;
align-items: center;
}
div img {
object-fit: contain;
}
<div style="border: 1px solid red;">
<img src="https://img.joomcdn.net/9dd32cbfa0cdd7f48ca094972ca47727cd3cd82c_original.jpeg" alt="" srcset="" style="
border-radius: 50%;
height: 7.5rem;
width: 7.5rem;
object-fit: contain;" />
</div>
Add this to your CSS:
#artiststhumbnail a img {
display: block;
margin-left: auto;
margin-right: auto;
}
Just referencing a child element which in that case is the image.
To center an image horizontally, this works:
<p style="text-align:center"><img src=""></p>
Put the picture inside a newDiv.
Make the width of the containing div the same as the image.
Apply margin: 0 auto; to the newDiv.
That should center the div within the container.
Use positioning. The following worked for me... (Horizontally and Vertically Centered)
With zoom to the center of the image (image fills the div):
div{
display:block;
overflow:hidden;
width: 70px;
height: 70px;
position: relative;
}
div img{
min-width: 70px;
min-height: 70px;
max-width: 250%;
max-height: 250%;
top: -50%;
left: -50%;
bottom: -50%;
right: -50%;
position: absolute;
}
Without zoom to the center of the image (image does not fill the div):
div{
display:block;
overflow:hidden;
width: 100px;
height: 100px;
position: relative;
}
div img{
width: 70px;
height: 70px;
top: 50%;
left: 50%;
bottom: 50%;
right: 50%;
position: absolute;
}
Center a image in a div
/* standar */
div, .flexbox-div {
position: relative;
width: 100%;
height: 100px;
margin: 10px;
background-color: grey;
}
img {
border: 3px solid red;
width: 75px;
height: 75px;
}
/* || standar */
/* transform */
.transform {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); /* IE 9 */
-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
}
/* || transform */
/* flexbox margin */
.flexbox-div {
display: -webkit-flex;
display: flex;
background-color: lightgrey;
}
.margin-img {
margin: auto;
}
/* || flexbox margin */
/* flexbox justify align */
.flexbox-justify {
justify-content: center;
}
.align-item {
align-self: center;
}
/* || flexbox justify align */
<h4>Using transform </h4>
<div>
<img class="transform" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" />
</div>
<h4>Using flexbox margin</h4>
<div class="flexbox-div">
<img class="margin-img" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" />
</div>
<h4>Using flexbox justify align</h4>
<div class="flexbox-div flexbox-justify">
<img class="align-item" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" />
</div>
I have tried a few ways. But this way works perfectly for me
<img src="~/images/btn.png" class="img-responsive" id="hide" style="display: block; margin-left: auto; margin-right: auto;" />
Put an equal pixel padding for left and right:
<div id="artiststhumbnail" style="padding-left:ypx;padding-right:ypx">
A responsive way to center an image can be like this:
.center {
display: block;
margin: auto;
max-width: 100%;
max-height: 100%;
}
you can align your content using flex box with minimum code
HTML
<div class="image-container">
<img src="https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg" width="100px">
</div>
CSS
.image-container{
width:100%;
background:green;
display:flex;
.image-container{
width:100%;
background:green;
display:flex;
justify-content: center;
align-items:center;
}
<div class="image-container">
<img src="https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg" width="100px">
</div>
js fiddle link https://jsfiddle.net/7un6ku2m/
If you have to do this inline (such as when using an input box),
here is a quick hack that worked for me: surround your (image link in this case)
in a div with style="text-align:center"
<div style="text-align:center">
<a title="Example Image: Google Logo" href="https://www.google.com/"
target="_blank" rel="noopener"><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Google Logo. Click to visit Google.com" border="0" data-recalc-dims="1" /></a>
<h6><strong>This text will also be centered </strong></h6>
</div> /* ends centering style */
.document {
align-items: center;
background-color: hsl(229, 57%, 11%);
border-radius: 5px;
display: flex;
height: 40px;
width: 40px;
}
.document img {
display: block;
margin: auto;
}
<div class="document">
<img src="./images/icon-document.svg" alt="icon-document" />
</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
/*-------------------important for fluid images---\/--*/
overflow-x: hidden; /* some browsers shows it for mysterious reasons to me*/
overflow-y: scroll;
margin-left:0px;
margin-top:0px;
/*-------------------important for fluid images---/\--*/
}
.thirddiv{
float:left;
width:100vw;
height:100vh;
margin:0px;
background:olive;
}
.thirdclassclassone{
float:left; /*important*/
background:grey;
width:80vw;
height:80vh; /*match with img height bellow*/
margin-left:10vw; /* 100vw minus "width"/2 */
margin-right:10vw; /* 100vw minus "width"/2 */
margin-top:10vh;
}
.thirdclassclassone img{
position:relative; /*important*/
display: block; /*important*/
margin-left: auto; /*very important*/
margin-right: auto; /*very important*/
height:80vh; /*match with parent div above*/
/*--------------------------------
margin-top:5vh;
margin-bottom:5vh;
---------------------------------*/
/*---------------------set margins to match total height of parent di----------------------------------------*/
}
</style>
</head>
<body>
<div class="thirddiv">
<div class="thirdclassclassone">
<img src="ireland.png">
</div>
</body>
</html>
##Both Vertically and Horizontally center of the Page
.box{
width: 300px;
height: 300px;
background-color: #232532;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
Style.css
img#center-img{
display: block;
margin: auto;
}
Html
<html>
<body>
<div>
<img src='pic.png' id='center-img'>
</div>
</body>
</html>
To center a image use this css. You have to give width at first of the image.
img{
width: 300px;
position: fixed;
left0;
right:0;
}
I know how to put text on hover on an image if the height and the width is fixed. but I have a responsive slider (owl-slider) and want to add link (easy - yeah.) and a blue overlay with white text in it and a simple fading/sliding transition from the overlay.
The problem is: every item changes its height and width on resizing. I could write several media queries, but I'm quite sure there must be a simpler solution to that problem.
I have a very simple markup:
<div>
<a href="#">
<img src="http://placehold.it/360x100">
<div class="overlay">Click here for more Infomartion</div>
</a>
</div>
Normally I would go for pure css method with setting height and width from .overlay to the image size and set visibility on hover. But.. that won't work, because the width & height will differ from viewport to viewport. So, what would you suggest?
The trick involves setting position: relative to the parent container .image-container which contains the image. Using display: inline-block will force the parent container to shrink-to-fit the image.
You then apply position:absolute to the child container (overlay) .hover-text and set all the offsets (left, right, top and bottom) to zero, which will force the overlay to match the size of the image.
If you want to vertically center the text, you need to add two nested blocks.
One way of doing it is to repurpose the a element using display: table with width and height of 100%, and then apply display: table-cell to the nested div with vertical-align: middle. This will center the text vertically if so desired.
I added a transition effect to demonstrate how to set it up. You can
adjust the details as you like for duration and transition type.
Ref: http://www.w3.org/TR/css3-transitions/
You could also do a translation using a CSS transform, which is also feasible since the modern browsers support transforms (especially in 2D).
.image-container {
position: relative;
display: inline-block;
}
.image-container .hover-text {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0, 0, 255, 0.5);
opacity: 0;
transition: opacity;
}
.hover-text a {
display: table;
height: 100%;
width: 100%;
text-decoration: none;
}
.hover-text a div {
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 3.0em;
color: white;
}
.image-container img {
vertical-align: top; /* fixes white space due to baseline alignment */
}
.image-container:hover .hover-text {
opacity: 1;
transition-duration: 1s;
transition-timing-function: linear;
}
<div class="image-container">
<img src="http://placehold.it/360x100">
<div class="hover-text">
<a href="#">
<div>Text on hover</div>
</a>
</div>
</div>
Try this, it doesn't care about the image size
.image-container{
position: relative;
display: inline-block;
}
.image-container .hover-text{
position: absolute;
top: 33%;
width: 100%;
text-align: center;
visibility: hidden;
}
.image-container:hover .hover-text{
visibility: visible;
}
/* styling */
.hover-text{
font-family: sans-serif;
color: white;
background: rgba(0,0,0,0.3);
text-shadow: 1px 1px 1px black;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
.hover-text a{
color: white;
}
<div class="image-container">
<img src="http://placehold.it/360x100">
<div class="hover-text">
Text on hover Link
</div>
</div>
Skipped the transition stuff, but is this what you're requesting?
div {
position: relative;
}
img {
width: 100%;
}
.overlay {
background: blue;
color: white;
display: none;
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
}
a:hover .overlay {
display: block;
}
JSFIDDLE: http://jsfiddle.net/volzy/hLpLabaz/1/
For full size overlay do:
.overlay {
height: 100%;
top: 0;
}
I want to middle align 2 divs. I have tried many answers on SO but no success.
Can anyone please help?
.image-container {
position: relative;
width: 120px;
height: 120px;
}
.upload-text-wrapper {
background-color: rgba(248, 247, 216, 0.7);
width: 120px;
height: 120px;
position: absolute;
top: 0;
opacity: 0;
}
.upload-text-wrapper:hover {
opacity: 1;
}
<div class="image-container">
<img class="image-frame" src="http://www.telecomwiz.com/wp-content/uploads/2015/03/free-stock-photo-brick-wall-imageslive-decorating-a-white-brick-wall-decoration-picture-white-brick-wall-120x120." />
<div class="upload-text-wrapper">
<div class="upload-button-icon">X</div>
<div class="upload-button-title">control 1</div>
</div>
</div>
I want to align upload-button-icon and upload-button-title in middle both vertically and horizontally on hover without changing the existing html structure.
Something like this:
.upload-button-icon, .upload-button-title {
text-align:center;
transform: translateY(35px);
}
https://jsfiddle.net/xs0gc0r2/4/ Note: you can change translateY value to fit your needs... Note2: not sure about css/ how you will style these divs, some tweaks will be needed, probably. This works with provided html/css...
Maybe it's good to use this variant that does not use CSS3:
You can support older browsers and won't have to adjust the translateY-value when the image size changes.
.image-container {
width: 120px;
height: 120px;
display: table;
}
.image-frame {
position: absolute;
z-index: -1;
}
.upload-text-wrapper {
background-color: rgba(248, 247, 216, 0.7);
text-align:center;
vertical-align: middle;
display: none;
}
.image-container:hover .upload-text-wrapper{
display: table-cell;
}
<div class="image-container">
<img class="image-frame" src="http://www.telecomwiz.com/wp-content/uploads/2015/03/free-stock-photo-brick-wall-imageslive-decorating-a-white-brick-wall-decoration-picture-white-brick-wall-120x120." />
<div class="upload-text-wrapper">
<div class="upload-button-icon">X</div>
<div class="upload-button-title">control 1</div>
</div>
</div>