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:

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

Doesn't the .stop(true) function completely clear the queue as it should?

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 ...

javascriptjqueryhtmlcss

Create a basic chart using JavaScript

I am looking to replicate a specific chart using JavaScript. The red point in the chart is variable. So far, I have attempted to create it using the flot library: var d3 = [[7,7]]; $.plot("#placeholder", [{ data: d3, points: { show: true } }], { ...

javascripthtmlplotchartsdraw

Enroll a nearby variable "Data" to an Observable belonging to a different Component within an Angular application

Looking to update the HTML view using *ngIf, depending on a local variable that should change based on an observable variable from a shared service. HTML <div class="login-container" *ngIf="!isAuthenticated"> TypeScript code for the same componen ...

htmlangulartypescriptobservable

Can you explain the steps to implement this feature in a modal window using jQuery?

My HTML list contains a bunch of li elements. ul li img .det li I am looking to create a modal popup that appears when I click on something. I want this modal popup to have previous and next buttons, preferably implemented using jQuery. I have alr ...

javascripthtmlcss

In Internet Explorer versions 7 and 8, a transparent overlay div enables click-through functionality

I am facing an issue with a div containing form elements and an invisible overlay mask. When using IE 7 and 8, the click goes through the overlay without background which is incorrect. To solve this problem, I added a background color to the overlay div w ...

jquerycssinternet-explorer-8internet-explorer-7overlay

Tracking the User Interface efficiency of a Java Applet running on a website

I have developed a Java Swing based messenger applet that runs smoothly on browsers. My next step is to host this applet on a webpage and allow users to test it out. I want to track the time they spend on each task while using the messenger, as well as any ...

swingapplethtmlweb-hosting

Running Javascript based on the output of PHP code

I have been working on my code with test.php that should trigger some Javascript when my PHP code, conditional.php, detects input and submits it. However, instead of executing the expected "Do Something in Javascript," it outputs "Not empty" instead. I fin ...

javascriptphphtmlajaxjson

Swift code in WKWebView shows increased word spacing in lengthy Arabic texts

Having long Arabic text within <p> tags in my HTML file (loaded by WKWebView) on my app results in unusually large word spacing and unreadable text. In Xcode, the letters in the HTML file appear disconnected. Is there a way to prevent this issue with ...

htmlwkwebview

Angular's ngClass directive failed to be applied correctly

I am currently experimenting with the use of [ngClass] in Angular and it appears that it is not being applied as expected. Interestingly, [ngStyle] for similar CSS styles is working without any issues. What could I be doing wrong in this scenario? There ar ...

cssangularangular-ng-class

Utilize CSS properties to pass as arguments to a JavaScript function

Is there a way for me to make my CSS animation functions more efficient? I have similar functions for different properties like height, width, and left. Can I modify the function below to accept a CSS property argument instead of hardcoding height? Window ...

javascriptcss

MySQL automatically inserts a null record if no value is provided

Currently, I am working on a project that involves inserting, viewing, and deleting records. Although everything functions smoothly, an issue persists where a null record is automatically added for some reason. The deletion feature works perfectly for othe ...

phphtmlmysql

Using Ajax to trigger JSON-formatted HTML output

Issue with Populating Modal Window I am encountering difficulties while trying to populate a modal window dynamically with extended information retrieved from a mySQL database. Despite attempting various methods such as nested arrays, while loops, and for ...

phpjqueryhtmlmysqljson

Tips for concealing a chosen alternative from the menu of options when utilizing mat-select

I am currently working with the latest version of mat-select, version 16. I have a requirement where, when a specific option is selected and the select drop-down is clicked again, that selected option should not appear in the options list. Below is the HTM ...

htmlcssangularmat-select

Build a nested block containing a div, link, and image using jQuery or vanilla JavaScript

I have a button that, when clicked, generates a panel with 4 divs, multiple href links, and multiple images. I am new to web programming and understand that this functionality needs to be in the Javascript section, especially since it involves using jsPlum ...

javascriptjqueryhtmljsplumb

A common inquiry: how can one pinpoint a location within an irregular figure?

I have been studying Html5 Canvas for a few weeks now, and the challenge mentioned above has puzzled me for quite some time. An irregular shape could be a circle, rectangle, ellipse, polygon, or a path constructed by various lines and bezier curves... I ...

javascripthtmlcanvas

When switching between classes, it is not possible to apply a different value to the same CSS property

I am currently working on a project that involves toggling a class on a ul tag with an id of sideNav using JavaScript. In this scenario, I have set the left attribute of the id to 0, while the same attribute in the class has a value of -100%. After sever ...

javascripthtmlcss

The node.js and express.js update operation (CRUD) is not rendering the CSS files properly

I am currently developing a CRUD app using Node.js/Express.js with EJS as the templating engine. The concept I'm working on involves displaying user_ids from a database, and when an admin clicks on a user_id, it should redirect them to the edit_team. ...

cssnode.jsexpressejs

Preventing blank text entries in a task management application

Is there a way to determine if the text input provided by the user is empty or contains some text? I'm in the process of developing a TO-DO app and I'd like it so that if a user fails to enter anything into the text area and clicks on "add", the ...

javascripthtml

What is the best way to ensure that the CSS padding for a button matches the width of the column consistently?

I have encountered an issue where I am unable to maintain consistent padding for a button relative to the column width. This is crucial for me because the button's background changes when a user hovers over it. However, using a fixed value for the but ...

htmlcsswebpadding

Convert XML data into a structured table format

We have an XML file named "servers.xml" that needs to be parsed. This file is located on the same server where we want it to be parsed, in the same folder. <root> <list> <server> <server name="28 Disconnects La ...

javascriptajaxxmlhtmldom