I'm working with an outer div that contains an inner div. The inner div has a background-image applied to it.
What's the best way to vertically center align the inner image?
I would prefer not to use margin-top for this.
I'm working with an outer div that contains an inner div. The inner div has a background-image applied to it.
What's the best way to vertically center align the inner image?
I would prefer not to use margin-top for this.
To achieve the desired effect of centering the Google logo vertically, use this CSS code snippet.
#imgDiv {
width: 300px;
height: 100px;
background-image: url("http://www.google.com/intl/en_com/images/srpr/logo3w.png");
background-repeat: no-repeat;
border: 1px solid blue;
position:relative;
top: 50%;
-moz-transform: translatey(-50%);
-ms-transform: translatey(-50%);
-o-transform: translatey(-50%);
-webkit-transform: translatey(-50%);
transform: translatey(-50%);
}
To achieve this effect using CSS, you can utilize the "position" property in your styling.
#container {
position: relative;
}
#element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
}
The simplest approach is to adjust the height of #imgDiv to height:100%; and then specify the background-position as center, center.
#imgDiv {
width: 300px;
height: 100%;
background-image: url("http://www.examplesite.com/assets/logo.png");
background-repeat: no-repeat;
border: 1px solid blue;
background-position:center,center;
}
Check out this example: See Demo
Here is an updated demo that meets your specifications: Please note: If the text height increases, the background image will move upwards
div.outer {
display:table;
border: 1px solid red;
height:300px;
width:300px
}
.inner {
display:table-cell;
vertical-align:middle;
line-height:normal;
margin:0 auto;
text-align:center;
}
#imgDiv {
width: 300px;
height: 100px;
background-image: url("http://www.google.com/intl/en_com/images/srpr/logo3w.png");
background-position: center;
background-repeat: no-repeat;
border: 1px solid blue;
}
#spanid {
text-align: center;
}
HTML:
<div class="outer">
<div class="inner">
<div id="imgDiv"></div> <span id="spanid">Some text....</span>
</div>
</div>
If you want to achieve this effect, try using the CSS properties display and flex! Check out the live Demo.
#imgDiv {
width: 500px;
height: 100px;
background-image: url("http://www.example.com/image.png");
background-repeat: no-repeat;
border: 1px solid blue;
margin: auto;
}
.outerDiv {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
border: 1px solid red;
height:300px;
width:300px;
}
To make the parent element display like a table, use display: table;
For the child element, add display:table-cell; and vertical-align:middle;. If you want the background to be centered, add
background-position: center center;#imgDiv {
width: 300px;
height: 100px;
background-image: url("http://www.google.com/intl/en_com/images/srpr/logo3w.png");
background-repeat: no-repeat;
border: 1px solid blue;
display: table-cell;
vertical-align: middle;
}<div style="position:relative; border: 1px solid red; height:300px; width:300px; display: table;">
<div id="imgDiv"> Hello Vertical Middle !! </div>
</div>In my project, I have a main stylesheet called application.css included in the layout file layouts/application.html.erb: <%= stylesheet_link_tag "application" %> However, there is a specific section of the website where I want to use a different st ...
I've been trying to import a python dictionary from models in Django and manipulate/print its properties in JavaScript. Unfortunately, I'm not getting any output and there are no error messages displaying. Views.py from chesssite.models import ...
Is there a solution to prevent padding overflow in the Bootstrap Card Column when trying to split a dictionary of items into three columns? The issue is that the padding from bottom rows spills into the top of the next column (refer to col1->col2). Vie ...
Can someone help me with separating the strings in this line "Add Problem Report \n Add Maintenance Report \n Add Expenses Report \n Add Contract", into new lines? I have tried using br, pre, and \n but it does not seem to work. HTML ...
Looking for a way to align multiple items horizontally across two columns within a row in Bootstrap? Check out the sample HTML code below: <div class="container"> <div class="row"> <div class="col-sm-6"> <h1>Short Hea ...
I am working on a loop that generates multiple boxes with masonry layout containing post excerpts. <div class="box"> <div class="image"> <img src="" /> </div> <div class="info"> <h3>//title output with ...
Implementing typeahead functionality on two input fields: <div class="form-group> <label class="control-label=">Product Code:</label> <input placeholder="Enter Value" type="text" class="form-control" ng-model="a.product ...
I have integrated a color picker jquery plugin on my website to allow users to pick colors from an image. I made a modification in the CSS to change the cursor to an eyedropper icon. However, currently when clicking on the image, the color pointed by the u ...
Looking to modify the <html> tag in the master page <html xmlns="http://www.w3.org/1999/xhtml"> I am trying to add an additional attribute from another page that utilizes this master page. My goal is to end up with something like this: <h ...
Initially, I successfully changed the font and color of text on Google using a simple code. However, when I attempted to incorporate it into a toggle on / off switch, the changes did not take effect. To address this issue, I sought assistance from ChatGPT ...
Recently, I encountered an issue with a dynamically built table on my page that contains editable data fields. Here is an example snippet of the table structure: <tr> <td class="identifier">1</td> <td class="c1&q ...
I am just starting out with HTML, and I would like to show a message if JavaScript is disabled. To do this, I have placed the message within the <noscript> tag, which is working perfectly. <noscript> Need to enable Javascript. </noscript> ...
I am facing an issue with populating a drop-down menu from an XML file using a specific script. Let me share the script I have been working with: $(document).ready(function(){ // loading jQuery 1.5 function loadfail(){ alert("Error: Failed to r ...
Is there a way to achieve the combination of fixed and fluid width columns using Twitter Bootstrap alone, similar to this example? The HTML and CSS in the example make it seem simple. But can this be done solely with Bootstrap? ...
I'm currently working on a browser app for Windows Phone 8 that utilizes the browser control feature. Within the app, an external webpage is downloaded in the background using WebClient and stored as a string. The intention is to then display this co ...
I've been encountering the following error message 'NavigableString' object has no attribute 'a' When attempting it this way def get_vlad(url): html = requests.get(url, headers=headers) soup = Be ...
Whenever the prototype for goingOutChecker() works correctly and I call it within the GeneralChecker() function, I want the Success! and Oops! banners to display at the top of the browser. However, if I comment out the goingOutChecker() prototype and funct ...
At the moment, the line that separates the content from the side menu stops at the side menu's content. However, the content is going to be longer than the side menu, causing the page to look uneven. I attempted to adjust the page-content d-flex but d ...
[Resolved Previous Issue] Recently, I obtained an image upload script that utilizes Ajax and jQuery. My goal is to restrict the maximum number of uploads to just 8 images. Any suggestions or advice would be greatly appreciated. Source of Download: ...
I recently built a website using Bootstrap 3, but I'm facing an issue in responsive mode with the horizontal scroll bar on my index.html page. Strangely, this overflow-x problem is isolated to just this particular page and doesn't occur on any of ...