Take a look at the following example:
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
The height of box1 is smaller than that of box2. Is there a way to vertically center box1 within box2 without setting a fixed margin-top due to varying heights?
Check out the code on jsFiddle: http://jsfiddle.net/k8972/
Hey there, I've now updated the code to use display inline-block, set the vertical-align property and removed the float attribute.
Here's how it looks:
.wrap{
overflow:hidden;
border:1px solid red;
width:250px;
display:table;
}
.left{
width:100px;
height:50px;
background:yellow;
display:inline-block;
vertical-align:middle;
}
.right{
width:100px;
height:100px;
background:brown;
display:inline-block;
vertical-align:middle;
}
Feel free to check out a live demo here
Applying display: table-cell and vertical-align: middle; is a great option, although it may not be compatible with IE7 or earlier versions.
Here are a couple of ways to achieve the desired result.
Visit this link for more information
After creating a React + Redux web app bundled with webpack, I encountered a bundling error that caused my website to display flash of unstyled content (FUOC) behavior. Certain components did not inject their CSS into the server response, resulting in pa ...
I successfully positioned my right hand content on top of the leaflet map in the background using CSS properties like position and z-index. However, I am looking for a way to make the overlapping div not only transparent but also non-interactive while stil ...
I have implemented a script to automatically resize the height and width of an iframe based on its content. <script language="JavaScript"> function autoResize(id){ var newheight; var newwidth; if(document.getElementById){ newh ...
I am currently learning feathers and encountering a problem. I am attempting to include files similar to PHP's switch function. For instance: /src/middleware/index.js 'use strict'; const handler = require('feathers-errors/handler&ap ...
Seeking assistance with using the value selected in a drop-down box as a PHP variable in my functions.php file. I attempted to utilize jquery-ajax for this purpose. $(document).ready(function(){ $("#pa_color").change(function(){ var result= $(this).val( ...
I have a group of mat-icons that are automatically generated, meaning I cannot assign them ids or classes. The only way to distinguish between them is by their names: <mat-icon role="img">details</mat-icon> <mat-icon role="img ...
My current dilemma is a seemingly simple one: <div class="container"> <div class="a"></div> <div class="b"></div> <div class="c"></div> </div> Within the container, there are 3 divs: A and B ...
My knowledge of creating shapes and using these programming languages is limited. I am currently working on a survey in Qualtrics and I need to insert text into circular shapes. Creating one circle was straightforward, thanks to some helpful discussions ...
I'm currently working on a bot that needs Selenium to interact with the search bar on Walmart's website, where it will input the name of a specific product and perform a search. However, I've encountered an issue where no matter what method ...
I am currently working on my project with the "AngularJS" invoice template. The issue I am facing is that the currency symbol appears in the sub total text box. While this is fine for display purposes, when I input data into the database, it also adds the ...
<custom-img class="decrease-item" img-src="images/minus-green.svg" @click="event => callDecreaseItem(event, itemId)" /> Here we have the code snippet where an image component is being referenced. <template&g ...
Hey there, I've implemented the accordion-toggle code below on my visualforce page. Everything is working smoothly with the collapsible toggle, except for one issue. When loading or refreshing the page for the first time, the collapsed panel shows the ...
In the process of creating a Django web application, I am exploring methods to determine if a particular application is installed on the user's local machine. One idea I have considered is checking for the existence of a specific folder, such as C:&bs ...
Hello everyone, this is my first time seeking assistance on this platform. If any additional information is required, please do not hesitate to ask. Currently, I am working with JavaScript in combination with the handlebars framework. Within a bootstrap ...
I am working on a website and I want to change editButton.textContent = 'Edit'; so that it displays an image instead of text. var editButton = document.createElement('button'); editButton.textContent = 'Edit'; After exploring ...
I'm facing a challenge with a problem that I can't seem to resolve. The issue lies in my use of this plugin for displaying random images. The only step left is to refresh the content within the div. However, every time I attempt to do so, the an ...
I'm struggling to set a backgroundImage because it's not recognizing the local path URL. Here is my code snippet: import { makeStyles } from '@material-ui/core/styles'; const loginWrapperStyles = makeStyles(theme => ({ image: { ...
Currently, we have an Excel spreadsheet that is utilized for data collection from users and to populate our database. Now, the need arises to develop an asp.net page to gather this data instead. We are facing some challenges in determining the most effect ...
I have implemented the code provided in a codepen tutorial, but I replaced the world map image with a USA map. However, the dots are not responsive due to the z-index=1 specified on them. I experimented with vh, vw, and percentages, yet when I resize my s ...
Currently, I am experimenting with CSS effects. In my code, I have included div elements to display balls on the document body, each with random sizes and colors. However, an unexpected issue has arisen - excess scroll space is being generated due to the c ...