I'm attempting to include a subtle border around an icon.
The issue I am facing is that the image is positioned at the top of the bordered area, whereas I want it centered. Here's how it currently appears:
This is my current border CSS style:
div.Icon{
float:left;
border:1px #ccc solid;
padding:3px;
height:80px;
width:110px;
}
div.Icon img{
text-align:center;
}
Position the background image at the center of the div.
div.Icon{
float:left;
border:1px #ccc solid;
padding:3px;
height:80px;
width:110px;
background:url(yourimage.gif) no-repeat 50% 50%;
}
UPDATE:
...If the image needs to be dynamic, you can directly set the background-image in the style attribute of your html element.
<div style="background-image:url(<?php //whatever ?>);"></div>
In the css, simply remove the path...
background:no-repeat 50% 50%;
Did you consider applying the border directly to the image instead of enclosing it in a div?
img.picture {
padding: 5px;
border: 2px solid #666;
}
This way, there's no need to specify height and width in CSS or add an extra layer with a div around the image.
Could you please add a bit of padding?
div.Icon img {
justify-content: center;
padding-top: 30px;
}
Looking for a way to add support for button hover effects in IE 7-9 on this Codepen.io project. Can anyone help? For example, I'm trying: transition-duration: 0.5s; transition-property: all; transition-timing-function: ease; margin-top: 5px; I atte ...
Here is the HTML code snippet I am working with: <div id="main_content"> <div id="left_side> <h1> MY BIG HEADER </h1> </div> <div id="content_area"> SOME CONTENT HERE SOME CONTENT HERE S ...
body { background-color: blueviolet; } .leftcolumn { width: 30%; height: 100%; float: left; background-color: brown; } .middlecolumn { float: left; background-color: yellowgreen; width: 60%; height: 100%; } <body> <div class= ...
Struggling with my band website development using Bootstrap. Inexperienced in web design, I'm facing difficulties getting elements to align properly without slipping under each other. Looking for insights and suggestions on how to avoid manual CSS adj ...
(UPDATE: Issue Resolved - I discovered that I needed to include the JavaScript within $(document).ready(function()), which was previously missing. The example below worked perfectly for me.) I am attempting to implement a Multi-Level Navbar with Angular 6 ...
Is there a way to adjust the size of the image on the right without altering the layout design? The current GIF is 500x500px, but it is only displaying as 100x100px. Any assistance would be greatly appreciated! To see what I currently have (Demo with code ...
One of the challenges I faced was creating a form with a hidden div section that only appears when a specific element is selected from a list. To achieve this, I utilized CSS to set the display property of the div to 'none' and then used jQuery t ...
Currently, I am in the process of developing my very first AngularJS application with Bootstrap as the responsive framework. In order to achieve a sticky footer, I usually utilize jQuery to determine the outerHeight of the footer and then apply that value ...
My goal is to create divs that are all the same size, while aligning some content within each div differently due to varying lengths. The objective is to keep the icon and text in a consistent position within all divs, but allow the divs to expand at the ...
Is it possible to make the shine effect work automatically (without needing hover) every 5 seconds? http://jsfiddle.net/AntonTrollback/nqQc7/ .icon:after { content: ""; position: absolute; top: -110%; left: -210%; width: 200%; height: 200%; ...
My goal is to merge two demos found in the material-ui documentation. Clipped under the app bar - Describes a page layout Fixed header - Illustrates a table with a fixed header. I am looking for a solution where the table occupies the entire available p ...
Just starting out with coding and currently practicing display and positioning. I've created a webpage with multiple divs containing the same content, displayed in a vertical scroll order. Now, I'm looking to position these divs side by side in r ...
Check out my codepen to see what I need by clicking on this link: https://codepen.io/tbellmer/pen/RdxBdQ I am new to this and although the form works, I require help with the design. I want both the Action: and Comment: labels to be aligned to the right. ...
I am currently designing a web page that includes <div class="cane-wrap"> <h1 class="mc">christmas tic tac toe</h1> </div> located at the top center of the webpage, with autoplay running in the backgroun ...
Check out the card sample with a lizard photo on https://material-ui.com/components/cards. When you hover over the cardActionArea, it will get darker or lighter based on the theme. Clicking on the card will make the picture change its brightness relative ...
I have created a modal popup example where scrolling is disabled in the background but enabled within the pop-up itself. Check out my demo here: View Demo My challenge lies in implementing a grid of images on the website: Take a look at the type of grid ...
I am working on an HTML project where I have a JavaScript file that reads from a text file. Currently, the text from the file is displaying in my HTML file, but I would like to style it using CSS. Can anyone provide guidance on how to achieve this? I am st ...
I am struggling with the html/coffee/scss aspects, although I'm comfortable with Ruby. On my website, I have implemented a hotlist widget sourced from this link: https://gist.github.com/andre-morassut/8705385. While it functions properly, I encounter ...
Struggling with positioning my footer at the bottom of my website, I've tried various solutions posted by others but they don't seem to work for me. I've experimented with different methods like using 'Bottom: 0;' or placing my fo ...
My web application features an Angular Material datepicker, however, I am facing an issue where not all elements are showing up in a row. The view is as follows: Datepicker To prevent any custom CSS from impacting the view, I have removed all customized ...