CSS vertical alignment: Getting it just right

I am currently using Bootstrap and below is a snippet of the code I have implemented.

<div class="row">
    <div class="col-lg-6"><img src="#" alt=""></div>
    <div class="col-lg-6">
        <h2>Heading</h2>
        <p>Some Text</p>
        <p>Some more text</p>
    </div>
</div>

The paragraphs have multiple lines of text. The size of the image on the left surpasses the text area, requiring vertical alignment of these elements. Various methods have been attempted:

1. Trial of the table/table-cell method.
2. Experimentation with the transform/Translatey approach.
3. Adjusting margin-top to 50% (initially skeptical about this).
4. Implementing flex and align-items/justify-content properties.

The challenge lies in the fact that the parent element lacks defined height, rendering all online solutions and those from StackOverflow ineffective for my specific case. Your insights and guidance towards resolution would be greatly valued.

Many thanks in advance.

htmlcsstwitter-bootstrap

Answer №1

By grouping those paragraphs within div tags, you can implement the solution provided below. In this code snippet, col-lg-6 has been replaced with col-xs-6 to display a left-right layout.

.outer {
  display: flex;
  align-items: stretch;
}

.middle {
    display: flex;
    align-items: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row outer>
    <div class="col-xs-6 middle"><img src="https://s-media-cache-ak0.pinimg.com/236x/f6/16/d0/f616d044c7937dde2e8ec2b4f3e6f79c.jpg" alt=""></div>
    <div class="col-xs-6 middle">
      <div class="inner">
        <h2>Heading</h2>
        <p>Some Text</p>
        <p>Some more text</p>
        </div>
    </div>
</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

How come my navigation item isn't positioned at the top of the window?

I'm facing an issue while trying to add a navbar with a navbar-brand to my website. It seems like the image I have included is causing the nav-items to not align properly at the top of the window. Here is a snapshot of the problem: https://i.sstatic.n ...

htmlcssbootstrap-4

What is causing this animation to malfunction?

Could someone assist me in hiding this div-container for a brief period of 2 seconds? If you have any alternative suggestions, feel free to share them but, please refrain from using jQuery or JavaScript. #vcontainer { height: 450px; width: 100%; ba ...

htmlcssjquery-animatekeyframe

Can CSS be used to generate a grid or error image in Internet Explorer?

Can an image like this be created using CSS in Internet Explorer? I attempted to use filter: progid:DXImageTransform.Microsoft.gradient, but it was unsuccessful. ...

csshtmlinternet-explorer

Is it possible to swap a <div> element with the content of another HTML page using the .innerHTML method?

I am currently working on a project that involves loading different webpages into a <div> on my page once specific links are clicked. I came across a thread about using jQuery for this purpose, but I'm not familiar with it. Is there a way to ach ...

javascripthtmlcss

The card has adhered itself to the uppermost part of the Bootstrap 4 webpage

I attempted to center the container on the page, but it appears to be stuck at the top instead. I have come across a related question, but the solutions provided did not work for me. I even tried copying some code snippets, but in my Firefox browser, the ...

htmlfirefoxbootstrap-4

Access an attribute using slashes in Jquery

I've been struggling to use jQuery to select an object based on a unique filename attribute. However, I'm facing issues with escaping slashes when the selector is created using a variable. Despite spending hours trying different combinations, I s ...

javascriptjqueryhtmljquery-selectorsescaping

completion of bootstrap content

When arranging content using Bootstrap, I noticed that when the image is on the left, it appears to adapt properly. However, if I place the image on the right, the layout changes from what was intended. How can I fix this issue? <div class="about&q ...

htmlbootstrap-4

Setting the path to an image component using the style jsx tag in Next.js: A step-by-step guide

While utilizing jsx to define styles for my NextJs components, I am facing the challenge of defining a background image for certain elements. I have realized that only relative paths or absolute paths are accepted. But how can I pass a relative path to th ...

cssreactjsjsxnext.js

What is the best way to add styling to my image when hovered over within a link on a responsive website?

I'm having trouble aligning the :hover state with the original footer image links. Here is an edited version of the flicker issue I encountered on Chrome, while nothing appeared on Safari. I apologize for linking to the actual website, as I couldn&a ...

htmlcss

<div><!-- including: unknown --></div>

Need some assistance with this issue. The ng-include path I am using is "http://localhost:8080/coffeeprojects/calc.html". I tested the path and it seems to be working. However, despite organizing the files and improving the path as suggested in some resp ...

javascriptjqueryhtmlangularjscoffeescript

jQuery - Event cannot be triggered on the 'deselect' or 'focusout' of <option> tag

Check out the demo here Hello there, I have a situation where I need an input box to appear below a select option, only if the user selects "Other". The code currently uses the .click() function on the option, but now I am trying to make the input box di ...

javascriptjqueryhtml

A step-by-step guide on showcasing the content from a textfield onto a dynamic column chart

How can I show the value from a text field in a column chart? I found the code for the chart on this website(). I tried using the code below, but nothing happens. Can someone please assist me? <script> window.onload = function () { ...

javascripthtmlcharts

Is it possible to execute this animation with a single click for repetitive playback?

CODEPEN const btt = document.querySelector('.btt'); btt.addEventListener('click', function(){ this.classList.toggle('anime'); }); Is there a way to achieve the desired effect with just one click? ...

javascripthtmljquerycsscss-animations

Stop the div from expanding because of oversize text in Bootstrap

I have the following HTML source code for a Bootstrap card: <div class="card shadow-none card-fluid mb-3 mb-md-5"> <div class="row"> <div class="col-md-3 col-lg-3 mb-3 mb-sm-0"> <img class="img-fluid rounded" ...

htmlcss

Low-quality CSS Gradient Design

Hey everyone, Feel free to take a look at my preloader on this link: (Hit ESC as soon as the page loads to pause the website and focus on the loader) Upon closer inspection, you'll notice that there is an issue with the quality of the background l ...

htmlcsslinear-gradients

Discovering specific values for an ID using API calls in Angular (Implementing CRUD Operations in Angular with API Integration)

My current project involves CRUD operations in Angular utilizing the API created in Laravel. I have successfully added and fetched values, but encountered an issue when attempting to update values using their respective IDs. This snippet is from my app.co ...

htmlangularlaraveltypescriptcrud

How to locate the nearest parent link containing a specific attribute using jQuery

I am trying to locate the nearest link with the attribute findme from a child element .startpoint. Here is the structure: <ul> <li><a href="#">Point one</a></li> <li><a href="#" data-findme="yipi">Point tw ...

jqueryhtmllistclosest

What is the best way to create a flexible Ul-LI menu?

Is it possible to create a flexible menu where clicking on an item does not cover other items in the menu? #demo { margin: 30px 0 50px 0; font-family: sans-serif; } #demo .wrapper { display: inline-block; width: 180px; height: 20px; position ...

javascripthtmlcssdrop-down-menu

What is the best way to make a gradient fill and rounded border with CSS?

I am interested in creating a gradient and rounded border similar to the top bar on Instagram. Although I know how to create a rounded and solid border, this one utilizes a gradient. It appears that Instagram uses a canvas, but I am wondering if it can b ...

htmlcssfrontend

Customizing and adjusting the CSS for all individuals accessing the website

I am in the process of developing a system that will notify users in the office when a specific individual is busy and cannot answer the phone. How can I implement a feature where clicking "engaged" changes the color of the availability box to red on thei ...

htmlcssweb