How to vertically align an image within a DIV using Bootstrap version 3

I am having trouble centering this image vertically...

https://i.sstatic.net/8fWKC.jpg

<div class="col-lg-6 d-flex flex-column justify-content-center">

    <h4><strong>Assistance</strong></h4>
    <blockquote><p class="description" style="font-size: 14px;">
    When there is a <i class="fas fa-question-circle"></i> on a page and you hover over it, an overview of the options for that specific page will appear.
    </p></blockquote>

    <h4><strong>Editing</strong></h4>
    <blockquote><p class="description" style="font-size: 14px;">
    Using the button <button type="button" class="btn btn-xs" title="Add"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button>, a new item can be added to the current page.<br />
    If data can be edited, it is indicated by a <abbr title="">dotted line</abbr> under the text in question. It may be necessary to first enable edit mode using the button <input type="checkbox" data-toggle="toggle" data-size="mini" data-on="<span class='glyphicon glyphicon-pencil'></span>" data-off="<span class='glyphicon glyphicon-pencil'></span>" data-onstyle="danger"> on the relevant page.
    </p></blockquote>

</div>
<div class="col-lg-6">

    <img src="img/portfolio/torza/002.jpg" class="img-fluid" alt="Torza">

</div>

I have attempted to include 

style="display: inline-block; height: 100%; vertical-align: middle;"
on both div.

I also tried using the class vcenter, and even ensured it was included in the css as an extra precaution.

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

Any recommendations?

htmlcsstwitter-bootstrap-3

Answer №1

It seems like CSS is not needed in this case. Consider adding the classes mt-auto mb-auto to either the image or the second div with the class col-lg-6.

Answer №2

To ensure the image is centered in relation to the left content:

Simply enclose everything in a flex container and apply align-self: center; on the image container. This will make sure the centering is apparent, especially when the right container is shorter than the left one.

.flex {
  display: flex;
  flex-direction: row;
}

.vcenter {
  align-self: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="flex">
  <div class="col-lg-6 d-flex flex-column justify-content-center">

    <h4><strong>Help</strong></h4>
    <blockquote>
      <p class="description" style="font-size: 14px;">
        When there is a <i class="fas fa-question-circle"></i> on a page and you hover over it, an overview of the possibilities on that page will appear.
      </p>
    </blockquote>

    <h4><strong>Edit</strong></h4>
    <blockquote>
      <p class="description" style="font-size: 14px;">
        By clicking the <button type="button" class="btn btn-xs" title="Add"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button> button, a new item can be added to the current page.<br /> If data can be edited, this is indicated by a <abbr title="">dotted line</abbr> under the relevant text. The edit mode may need to be enabled first using the <input type="checkbox" data-toggle="toggle" data-size="mini" data-on="<span class='glyphicon glyphicon-pencil'></span>"
          data-off="<span class='glyphicon glyphicon-pencil'></span>" data-onstyle="danger"> button on the specific page.
      </p>
    </blockquote>

  </div>
  <div class="col-lg-6 vcenter">
    <img src="https://picsum.photos/100/100" class="img-fluid" alt="Torza">
  </div>
</div>

Answer №3

To enhance the appearance of the image div, include these CSS styles:

display:flex;justify-content:center;align-items:center;

This will result in:

<div class="col-lg-6" style="display:flex;justify-content:center;align-items:center">

    <img src="img/portfolio/torza/002.jpg" class="img-fluid" alt="Torza">

</div>

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

Achieving a full-width navigation element allows for other elements to be positioned below it, rather than directly beside it

Apologies for my not-so-great English. To better understand my issue, please refer to this fiddle and this fiddle. Focus on the <nav></nav> section. If there are only a few elements in the menu, the next block <section></section> ...

htmlcss

Having trouble accessing certain nodes while extracting HTML text with R

I have numerous water extraction permits that are accessible online and I am looking to extract specific data from them. For example url <- "https://www.ecan.govt.nz/data/consent-search/consentdetails/CRC000002.1" While I don't have a strong know ...

htmlrweb-scrapingrvest

Combining keyframe properties in a more efficient way using less code

While attempting to develop a LESS mixin for CSS3 keyframes, I encountered the typical way of chaining IDs and classes: #idOne, #idTwo, .classOne, .classTwo { ... } Nothing groundbreaking there. What I'm currently working on is crafting the foll ...

cssanimationlesscss-animations

Guide to sending a file to API server using Node.js

Currently, I am in the process of developing a web application that requires users to upload a test report. The front end is being handled by me, while another team member is responsible for the backend using node.js and mongodb. Our setups involve running ...

ajaxnode.jshtmlmongodbexpress

Incorporate an external JavaScript script using code

I'm currently working on integrating a map widget from 'Awesome Table' into the codebase of an open-source CRM platform. The specific code snippet I need to add is <div data-type="AwesomeTableView" data-viewID="-KLtnY5OHJPgnEOX1bKf"> ...

javascriptjqueryhtmlsrc

Center the image along with its caption in a div container

I am testing out this method (first answer) to vertically align an image over a div that has the following additional css properties so it occupies the entire space: position: absolute; top: 0px; bottom: 0px; left: 0px; right:0px; T ...

htmlcss

JavaScript - Utilize HTML input and modify its format

I have been struggling with this problem for a while now. I am in the process of creating a map to display the orbit of a specific satellite using Google Maps JS API. While I have made some progress, I have not been able to pull data from the HTML page as ...

javascriptjqueryhtmlnode.jslaravel

Even when set to 100% height, my div only extends halfway down the page

I'm having an issue with the page here. The div .menu-content is only reaching half the page, even when set to 100% height. I can't figure out why this is happening. Any help would be appreciated! <div class = "menu-content"> <div clas ...

htmlcsswordpress

Prevent certain parts of an element from displaying using CSS

By utilizing the CSS3 property clip-path, I am able to easily clip elements so that only a specified area remains visible. While this feature is useful, I'm wondering if there is a method to exclude an area so that everything except the specified path ...

htmlcss

Remove a row from a table by looping through all the rows using jQuery

#exceptions represents an html table. I attempted to use the code below, however it's not successfully removing the table row. $('#exceptions').find('tr').each(function(){ var flag=false; var val = 'excalibur'; ...

jqueryhtmltablerow

Add jQuery to a JavaScript document

Apologies for any language barriers, English is not my first language... I currently have a my_js.js file that is included in all my asp pages. However, I now need to incorporate jQuery into this specific page without directly adding script tags like < ...

javascriptjqueryhtmlasp.net

Creating new components within A-frame

I've been attempting to implement the bubble function into my scene to generate a sphere, but unfortunately nothing is showing up. Even when I try creating a sphere without using the bubble function, it still doesn't appear in the scene. func ...

javascripthtmlaframe

Combining classes in SCSS to create more versatile styles

Here is some code snippet: input { border:1px solid black; color:#FFF; } Another snippet: .input { padding:0px 5px 0px 3px; } How can we use SASS/SCSS to achieve the following: input.input This will apply the .input class directly to ...

csssass

Activate the opening of a .docx file in a new tab by utilizing an anchor tag

I have attached a docx file containing the terms and conditions for our project. Now, I would like to open it in a new tab. By clicking this link, you can view the <a title="click to view terms and conditions" style="color:blue;" target="_blank" href ...

javascripthtmlasp.nethrefdocx

Properly formatting HTML tags fetched from jsondata using jQuery and PHP

Seeking guidance here, as I am fairly new to utilizing jquery/json. Although I have successfully retrieved data from my database in json format, I am facing issues with displaying it correctly on the webpage. I have two main questions: Is my data storag ...

phpjqueryhtmljson

Minimize the vertical gap between menu items when they wrap onto a new line

When examining the screenshot of the website, you'll notice a considerable space between the first and second rows of menu items. I'm aiming to minimize this spacing as much as possible. The following CSS pertains to this issue: .gva-navigatio ...

htmlcsswhitespace

Wordpress theme's Bootstrap failing to display correctly on browser

I've been working on a WordPress theme with the bootstrap framework to style my page. First, I created a mock-up using standard HTML to ensure everything looked as desired: Prototype Code: <!DOCTYPE html> <html> <head> <meta c ...

phpcsswordpresswordpress-themingbootstrap-4

What could be causing the issue with multiple selection in jQuery?

I am interested in implementing multiple selection on my ASP page. I came across the pickList jQuery plugin and followed the instructions provided at the following link: Below is a snippet from my ASP page: <%@ Page Language="C#" AutoEventWireup="true ...

javascriptjqueryhtmlasp.net

Something seems to be preventing Div from appearing and there are no error messages appearing

I've been attempting to create a menu, but the toggle div for the menu isn't visible Following a tutorial where an individual sets up a menu, there is a div with a menu icon in the top left corner. Despite meticulously copying the code from the ...

javascriptcss

Using Node.js and Express, the CSS does not load due to route parameters

I'm currently working on a basic website project using Node.js, Express, and the EJS template engine. I've run into an issue where my external CSS files are not loading properly on routes that contain route parameters. Here's a snippet of my ...

cssnode.jsexpress