<div>
<img style="vertical-align:middle" src="https://placehold.it/60x60">
<span style="">New Product</span>
</div>I require this specific layout to be responsive. Could you please provide instructions on achieving this?
<div>
<img style="vertical-align:middle" src="https://placehold.it/60x60">
<span style="">New Product</span>
</div>I require this specific layout to be responsive. Could you please provide instructions on achieving this?
This query has surfaced multiple times before, and I have already addressed it in a previous duplicate. Feel free to integrate your code into the following example :)
div.counter {
position: relative;
display: inline-block;
}
div.counter span {
position: absolute;
text-align: center;
height: 100%;
width: 100%;
}
div.counter span:before {
display: inline-block;
vertical-align: middle;
height: 100%;
content: '';
}<div class="counter">
<span>Product</span>
<img src="http://placehold.it/60x60"/>
</div>Here is a code snippet that can help you achieve your desired result.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<h2>Center Align Elements</h2>
<p>To center a block element horizontally (like div), use the margin: auto; CSS property.</p>
<div class="center">
<p><b>Note: </b>Margin:auto may not work in IE8 without declaring a !DOCTYPE.</p>
</div>
</body>
</html>
Add the background-image property within the style of the div to set a background image.
To achieve the desired result, you can use the CSS property position: absolute; for text and set an image as a background.
#sample-1 img {
vertical-align: middle;
}
#sample-1 {
position: relative;
display: inline-block;
}
#sample-1 span {
position: absolute;
left: 5px;
top: 20px;
}
#sample-2 {
background-image: url('https://placehold.it/60x60');
width: 60px;
height: 60px;
text-align: center;
}
#sample-2 span {
line-height: 60px;
}<div id="sample-1">
<img src="https://placehold.it/60x60">
<span>Product</span>
</div>
<div id="sample-2">
<span>Product 2</span>
</div>Give this a shot!
<div class="example">
<img style="vertical-align:middle" src="https://placehold.it/200x200">
<span style="">Product</span>
</div>
CSS Styling:
.example {
width:200px;
position:relative;
}
.example span{
position:absolute;
left: 0;
right: 0;
top: 50%;
text-align: center;
margin: -9px auto 0;
}
Here is the code where the line height is set equal to the div height, making it responsive.
#imgContainer{
background: url(https://placehold.it/60x60);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 100%;
text-align: center;
}
#imgDesc{
top: 50%;
position: relative;
}<div id="imgContainer">
<span id="imgDesc">Works.</span>
</div>.picture {
position:relative;
}
.picture img {
width:200px;
}
.description {
left: 0;
position:absolute;
text-align:center;
top: 50px;
width: 200px
}<div class="picture">
<img src="https://placehold.it/80x80"/>
<div class="description">
Description
</div>
</div>Is there a method to incorporate links or buttons when hovering over a row in a kendo grid? I've searched through the documentation and looked online, but haven't found a solution. I'm considering if I should modify my row template to displa ...
For some reason, the small inkbar is not appearing under this tab. I suspect it might be a css issue that I can't seem to figure out. It's possible that I'm missing something I don't know about or maybe the height of the tab is too high ...
On a dynamically loaded page via pjax (except in IE), there are several links at the bottom. Whenever one of these hyperlinks is clicked, the page scrolls to the top while still loading. Although I am okay with this behavior, I'm curious if it' ...
Currently, I am involved in a project using Angular 4. One particular section involves changing images on hover. Although I have implemented the following code, it does not seem to be functioning correctly for me. Interestingly, the same code works perfect ...
In search of a div that houses multiple inner divs with equal padding on the left and right edges. This is crucial for maintaining a fluid layout where the distance between the inner divs and outer div border remains consistent even when the window size ch ...
I'm not sure why it's not working. Maybe I missed some simple thing? I want to show one div when I use an icon, then hide the other div. Currently, if I click on the first icon, a div will show. But if I click on the second icon, the div will sh ...
My slideshow has a hover function to pause it using .stop(true). Upon mouse exit, it should resume playing from where it left off. However, currently, when I hover over it, the animation stops and then continues until it reaches its target, pausing there a ...
I currently have an rz-slider featured on my webpage that is utilized for gathering the price of a product from the user. In addition to the slider, there are two input fields present which are designated for storing the minimum and maximum values. The ng- ...
My main inquiry is centered around the various techniques for creating responsive text. Is there a particular method that stands out as the best option for general use, or do different methods serve distinct purposes? ...
Upon implementing "hover one DIV - affecting another inner DIV," a strange issue arose on iPad/iPhones where it now requires two taps to click on the link within the DIV with the hover effect: Below is the HTML code: <div class="portfblock"> &l ...
Is there a way to evenly space my background image with 10px margins on all sides instead of just the left side? Currently, it's only working on the left side. .login-page { display: flex; flex-direction: column; background: url("../src/As ...
Creating a navigation menu with 4 blocks can be a bit tricky, especially when trying to show one block at a time upon click. Here is my code attempt, but unfortunately it's not working as expected. I would greatly appreciate any help or suggestions on ...
Below is the code I am using: <div style="width:60px; height:60px; background-color: lightgrey;"> <a class="" href="javascript:void(0)" style="color: black; width: inherit; height: inherit;"> <i class="fa fa-lg fa-play" aria-hidden="t ...
I have a code snippet that I'm struggling with. <p>haha</p> <button class="btn btn-light" onclick="nextSibling.classList.toggle('d-none');"> <i class="fa fa-ellipsis-h"></i> </button> <div class= ...
In the book "CSS The definitive Guide", it is mentioned that "The values of these seven properties must add up to the width of the element’s containing block, which is usually the value of width for a block element’s parent". However, in the case provi ...
My 3D rotating image carousel works well in Chrome and Firefox but not in IE. I am aware that IE10+ does not fully support the preserve-3d tag, and although there are workarounds by applying transforms to the children instead, I have been unsuccessful in ...
<div class="wrapper"> <button class="w-full h-14 pt-2 pb-1 px-3 bg-accent text-dark-1 rounded-full md:rounded select-none cursor-pointer md:hover:shadow-big focus:outline-none md:focus:bg-accent-2 md:focus:shadow-small "> ...
I am currently working on coding a basic HTML/CSS page and I want to include a background-image within a div element that links to a URL. Interestingly, my code is functioning properly in Safari (Mac) and Firefox but unfortunately not showing the desired r ...
Greetings everyone, Here is the current structure I am working on: <div class="payment-option clearfix"> <span class="custom-radio pull-xs-left">...</span> <label style="display:inline;width:100%"> <span style="fl ...
I'm having an issue using Sass with my Node.js app. I have installed the npm package "node-sass-middleware", but it's not generating the style.css file from the style.scss file. I am also using Express in my project. Can someone please assist me ...