Vertical Image Alignment in Bootstrap 3

Looking for some help with a basic HTML structure here. I have a single row divided into two columns, each containing an image of the same size. What I need is to center one image both horizontally and vertically in each column.


  <div class="container">
      <div class="row">
          <div class="col-md-6">
              <img src="example.png" />
          </div>
          <div class="col-md-6">
              <img src="example.png" />
          </div>
      </div>
  </div>

Here's a wireframe of how it should look: https://i.sstatic.net/6iwKb.jpg

I've tried using Bootstrap's center classes and custom CSS like flexbox, but the images still end up floating at the top of the page. Any ideas on what I might be missing?

htmlcsstwitter-bootstrap

Answer №1

Organize them neatly using a CSS table

.container .row {
    display: table;
    width: 100%;
}
.container .col-md-6 {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

Source: https://css-tricks.com/centering-in-the-unknown/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on adjusting image dimensions in JTextPane using HTML and CSS in the Java Swing environment

I am looking to add an image (such as a formula created from LaTeX) into JTextPane, using HTML+CSS for text formatting and manually setting its size. I attempted the following approach: import java.awt.Dimension; import javax.swing.JFrame; import javax.swi ...

javahtmlcssswing

Use jQuery to dynamically alter color based on conditional statements

What could be causing the background color not to change to green? var id; id = setInterval(changeColor, 1000); function changeColor(){ var elem= $("#target"); var color = elem.css('background-color'); if (color == &apos ...

javascripthtmljquerycss

What is the best way to limit input to only numbers and special characters?

Here is the code snippet I am working with: <input style="text-align: right;font-size: 12px;" class='input' (keyup.enter)="sumTotal($event)" type="text" [ngModel]="field.value" (focusin)="focusin()" (focusout)="format()" (keyup.ente ...

javascripthtmlangular

In-depth preg_match_all analysis

I'm encountering an issue with my detailed preg_match_all not working as expected. Instead of retrieving the desired data, I am getting a blank Array. Below is the code snippet I'm struggling with: <?php $remote_search = file_get_content ...

phphtmlparsingpreg-match

How come my Ajax call is setting the 'Content-Type' to 'application/x-www-form-urlencoded' instead of 'JSON' as specified in the dataType parameter?

I have encountered an issue while responding to a button click using the code snippet below. The console.log() confirms that the function is being called, but the HTTP request it generates contains the header "Content-Type: application/x-www-form-urlencode ...

javascriptjqueryhtml

Unresponsive JavaScript on specific element IDs

I'm experimenting with making three lines perform different animations: line 1 rotating 45deg and translating, line 2 becoming opaque, and line 3 rotating -45deg and translating. Check out my JS Fiddle here <a href="#"><div id="menu" onclic ...

javascripthtmlcss

The functionality of two-way binding in a distinct controller is not functioning properly when integrated with angular-wizard

I've been working hard to integrate this amazing wizard controller into my project: However, I've hit a roadblock with two-way binding not functioning as expected outside of the <section> attribute: http://plnkr.co/edit/N2lFrBRmRqPkHhUBfn ...

javascripthtmlangularjs

"Upload a video file and use JavaScript to extract and save the first frame as an image

I have a webpage where users can upload a video file, and the page will generate a thumbnail based on a timestamp provided by the user. Currently, I am focusing on generating the thumbnail from the FIRST frame of the video. Here is an example of my progr ...

javascripthtmltypescript

Deliver JavaScript and HTML through an HTTP response using Node.js

My attempts to send both a JavaScript file and an HTML file as responses seem to be failing, as the client is not receiving either. What could be causing the client to not receive the HTML and JavaScript files? I am using Nodejs along with JavaScript and H ...

javascripthtmlnode.js

As you scroll, the opacity gradually increases, creating a dynamic visual

Struggling to replicate a feature on a website where images gain opacity as you scroll down? Check out this site for reference: . While my current code somewhat achieves this effect, I'm having trouble figuring out how to apply a darker opacity gradua ...

javascriptjquerycssif-statementscroll

What is the best way to include a span within a select option element to display a flag beside each option?

I'm currently working on a dropdown menu that allows users to easily select their preferred language. I'm facing an issue with incorporating flags using https://github.com/lipis/flag-icon-css for each option. Can someone please assist me with thi ...

htmlcss

Attempting to position text both vertically and horizontally at the center beside an image

Visit my GitHub page here! Hello, I'm new to asking questions but I need help centering the text "Welcome to my site" both horizontally and vertically. I want it positioned halfway between the image and the right margin. I tried using display flex bu ...

htmlcsstextcenter

Maintain the HTML font color when printing - Issue with IE settings, not the printer

I've been struggling with this issue all day. Initially, I thought it was a problem with the print settings, but then I realized that it's actually the "Print background colors and images" option in IE causing the trouble. Here is the last test ...

htmlcssinternet-explorerprinting

Executing a command upon the pressing of the enter key within a text input field

Here is my input field: <input type="text" id="word" /> I am looking for a JavaScript function that will be triggered when the user hits enter in this text box. I searched for an answer but couldn't find one that fits my spe ...

javascripthtmljqueryjquery-events

Conceal a division using CSS based on its data-role attribute

After extensive research, I have yet to find a solution. Let's say there is a div structured like this: div[data-role="form-footer"] What would be the most effective method for hiding it, and can it be done using CSS? I've tried the f ...

htmljquerycss

The attempt to showcase items in a div element using inline display did not produce

I am having trouble with creating a webpage. I have designed a website but I am struggling to get it right. I have included my HTML and CSS code below. What I am trying to achieve is a header at the top, followed by several sections containing a photo on ...

htmlcss

Can a hashmap variable be declared in HTML code?

Can a hashmap variable be set in HTML code? Here's an example: <form name="f1234"> <input type="text" name="map['foo1']" value="dog" /> <input type="text" name="map['foo2']" value="cat" /> </form> < ...

htmlhashmap

Creating a unique custom icon by leveraging the material UI icons - a step-by-step guide

I am looking to create an arrow graphic similar to the one shown in the image below https://i.stack.imgur.com/k9TvH.png Originally, I was able to achieve this using SVG - <svg height='24' width='12' style={{ marginBottom: '-4p ...

csssvgmaterial-ui

The functionality of CSS scroll snap does not seem to be compatible with the CSS Grid

When utilizing CSS scroll snap with Flexbox, the snapping functionality works adequately: * { box-sizing: border-box; margin: 0; padding: 0; } .slider { font-family: sans-serif; scroll-snap-type: mandatory; scroll-snap-points-y: repeat(100vw ...

htmlcsscss-grid

Looking to achieve a scroll effect with mix-blend-mode using JavaScript?

I am seeking a method to adjust the background color of a specific element based on the background itself. While CSS offers the mix-blend-mode property, I am looking to specify the color manually. Ideally, I would like to achieve the same effect using an ...

javascriptcsssvgmix-blend-mode