Position text next to the image and center both horizontally and vertically within the div

I'm working on a Bootstrap div container that is divided into three equal-sized divs. I've managed to set the widths to be equal, but I'm struggling to maintain equal heights as well. Additionally, I can't seem to figure out how to center the contents of the div both vertically and horizontally. Another challenge I'm facing is centering text that appears next to an image.

This is a snippet of my HTML code:

<div class="container-fluid">
  <div>
    <img src="https://image.ibb.co/cjLadR/icon_1.png" alt="icon_1">
    <div> Test comments </div>
  </div>
  <div>
    <img src="https://image.ibb.co/gDrgJR/icon_2.png" alt="icon_2">
    <div> Test comments </div>
  </div>
  <div>
    <img src="https://image.ibb.co/hm1Rk6/icon_3.png" alt="icon_3">
    <div> Test comments </div>
  </div>
</div>

You can view a demo on JsFiddle

Below is what I am aiming to achieve:

https://i.sstatic.net/3IykA.png

csstwitter-bootstrap

Answer №1

Here is the solution for your question.

  1. If you are utilizing bootstrap, make sure to use the appropriate classes provided by it. Use col-xs-* within a row class as per the bootstrap structure.

  2. In order to align the content center aligned with your image, add additional classes like menu-item and flex.

Avoid overwriting any bootstrap classes unless absolutely necessary.

Give this approach a try. Hopefully, it will be beneficial for you. Best of luck!

.container-fluid > div {
  background-color: #34caf7;
}

.menu-item {
  display: flex;
  justify-content: center;
  padding: 10px 20px;
  align-items: center;
}
.menu-item img {
  height: 50px;
  width: 50px;
  margin-right: 10px;
}
.menu-item img + div {
  font-size: 13px;
  color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4 col-xs-12">
      <div class="menu-item">
        <img src="https://image.ibb.co/cjLadR/icon_1.png" alt="icon_1">
        <div> Test comments </div>
      </div>
    </div>
    <div class="col-sm-4 col-xs-12">
      <div class="menu-item">
        <img src="https://image.ibb.co/gDrgJR/icon_2.png" alt="icon_2">
        <div> Test comments </div>
      </div>
    </div>
    <div class="col-sm-4 col-xs-12">
      <div class="menu-item">
        <img src="https://image.ibb.co/hm1Rk6/icon_3.png" alt="icon_3">
        <div> Test comments </div>
      </div>
    </div>
  </div>
</div>

https://i.sstatic.net/esjSP.png https://i.sstatic.net/7hJSN.png

Answer №2

Consider utilizing the power of flex-box for precise element positioning, allowing the browser to handle all calculations and heavy lifting.

Your @media-query has been taken into account to ensure adjustments are made at the specified viewport.

Check out the Updated JSFiddle here

View the Code Snippet below:

.container-fluid {
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container-fluid > div {
    background-color: #34caf7;
    flex: 1 1 33.33%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container-fluid > div > img {
    float: left;
    width: 20%;
    margin-right: 30px;
}

.container-fluid > div > div {
    color: white;
    display: block;
}
@media (max-width: 480px) {
    .container-fluid > div {
        flex: 1 1 100%;
        padding: 10px;
    }

    .container-fluid {
        flex-direction: column;
    }
}
<div class="container-fluid">
  <div>
    <img src="https://image.ibb.co/cjLadR/icon_1.png" alt="icon_1">
    <div> Test comments </div>
  </div>
  <div>
    <img src="https://image.ibb.co/gDrgJR/icon_2.png" alt="icon_2">
    <div> Test comments </div>
  </div>
  <div>
    <img src="https://image.ibb.co/hm1Rk6/icon_3.png" alt="icon_3">
    <div> Test comments </div>
  </div>
</div>

Important note regarding cross-browser compatibility:

While flex-box offers powerful capabilities, it may have limited support or none at all in older browsers. Be sure to check compatibility before implementing, especially if you need to cater to IE11.

  1. Browser Compatibility for Flexbox
  2. Flexbox Compatibility Overview

Answer №3

To center the content in the .container >div, you can utilize the display:flex property along with align-items:center and justify-content:center.

If you are working with bootstrap, consider structuring your HTML using rows and cols, as that is one of the primary features of bootstrap.

For instance, you can create a layout like this:

<div class="container-fluid">
    <div class="row">
         <div class="col-sm-4">
         </div>
         <div class="col-sm-4">
         </div>
         <div class="col-sm-4">
         </div>
    </div>
 </div>

Here is a snippet with the solution provided:

.container-fluid {
  padding: 0 !important;
  margin: 0 !important;
}

.container-fluid > div {
  width: 33.33%;
  float: left;
  background-color: #34caf7;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container-fluid > div > img {
  float: left;
  margin: auto;
  width: 20%;
}

.container-fluid > div > div {
  float: left;
  color: white;
  display: block;
  margin: auto;
}

@media (max-width: 480px) {
  .container-fluid > div {
    display: block;
    width: 100%;
  }
}
<div class="container-fluid">
  <div>
    <img src="https://image.ibb.co/cjLadR/icon_1.png" alt="icon_1">
    <div> Test comments </div>
  </div>
  <div>
    <img src="https://image.ibb.co/gDrgJR/icon_2.png" alt="icon_2">
    <div> Test comments </div>
  </div>
  <div>
    <img src="https://image.ibb.co/hm1Rk6/icon_3.png" alt="icon_3">
    <div> Test comments </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 can I create a dynamic height for a scrollable div?

How can I build a section with a defined height that contains a sticky header (with a dynamic height) and a scrollable body? I want the body to be scrollable, but due to the header's changing height, I'm unable to set an exact height. What should ...

javascripthtmlcss

One opportunity to interact with the menu by clicking only once

I am encountering an issue with a menu div that starts off with opacity set to 0 and visibility hidden. The purpose is for this div to become visible when clicking on another div (a menu that sticks to the top of my page, toggle-able via click). Everythin ...

javascriptjqueryhtmlcss

Automatically fill in dropdown select options in a PHP form with pre-filled data

I am utilizing both Bootstrap and CI. I have set up a form that includes 2 dropdowns which pull data from MySQL. Within my database, there is a table called tb_sekolah with columns named id, kota, nama, provinsi, and status_sekolah. I successfully displa ...

phpjquerymysqlcodeignitertwitter-bootstrap

Centering text vertically in a horizontal form row with Bootstrap 4

How can a div with text be centered vertically in a Bootstrap 4 Horizontal form? For example, instead of a form input have a plain text div like "Password goes here," you can use the following code snippet: <form> <div class="form-group row"&g ...

cssbootstrap-4

What factors does Google Web Fonts consider when determining which font version to serve to my browser?

I recently came across information stating that "Google Web Fonts does its best to ensure proper versions are served, but sometimes discrepancies can occur between browsers and operating systems." My intention is to incorporate the following CSS code: fon ...

htmlcsswebfontsgoogle-webfonts

Analyzing and displaying contents within bootstrap panels

Currently, I am involved in a project that entails extracting data from an API related to a school's timetable. The code snippet below outlines the process I have implemented to gather all essential information: var timetable = []; var days = [&apos ...

javascriptarraystwitter-bootstrapelement

Sliding through a webpage effortlessly with jQuery slider equipped with main navigation and sub

Currently, my slider utilizes arrows and dots for navigation. I am looking to enhance it by adding a multi-page directory on the right side of the slider. This directory will have numbered pages, each containing a different set of images in arrays correspo ...

javascriptjqueryhtmlcssslider

Achieving a Pushing Footer Design with Content

Hey guys, I'm working on a website and I'm having some trouble with the footer. It's sticking to the bottom of the page, but the content is overflowing it. Check out this screenshot for reference: . Here is my HTML/CSS code for the footer: ...

htmlcssfooter

What causes Bootstrap Glyphicons to only show up during Chrome debugging?

During my development of an app in MVC4 using Twitter Bootstrap 2.3.2, I encountered a problem with Glyphicons when testing in Firefox and IE. In Firefox, instead of the icons displaying correctly, I saw the following image: I double-checked the referenc ...

cssgoogle-chromeasp.net-mvc-4twitter-bootstrapglyphicons

The alignment in the center is lacking consistency

Is anyone else experiencing issues with the duration and current time text not staying centered vertically? It seems to be a hit or miss, sometimes centering correctly and other times not. What could be causing this inconsistency, especially when no code c ...

htmlcss

How to arrange three buttons in a row using CSS styling

After reviewing similar issues posted by others, I have not found a solution to my problem. Despite trying the suggested solutions, I am unable to center two buttons representing different departments on my webpage. Here is my source code: <script ...

javascriptjqueryhtmlcss

Empty HTML elements

Is there a way to create empty HTML tags, meaning tags that have no predefined styling or effect on the enclosed content or its environment? For example, <p> creates a paragraph, <b> makes text bold, and <div> forms a container. I am in ...

htmlcsstags

Utilize CSS to ensure that the hover effect of the main navigation remains active even when the mouse hovers over the sub-menu

Is there a way to make the hover state in navigation items persist when the mouse hovers over a sub-menu? Currently, when hovering over a top-level nav item, the link color changes to white and background turns black, but this reverts back once the mouse m ...

csshover

The list style of Bootstrap Select Drop Down isn't vertical

Has anyone encountered an issue with bootstrap-select where the options in a drop down box are not vertically listed? <script src="{% static 'risk_parity/js/jquery-3.2.1.min.js' %}"></script> <script src="{% static 'r ...

csstwitter-bootstrapbootstrap-selectpicker

What is the reason for CSS to be included in the installation process when running npm install with [someLibraryName

After executing the following command: npm install vue-material I noticed that it installed and replaced some of the css styles in my application, leading to conflicts. To resolve this issue, I had to manually search for the specific piece of css and ove ...

cssvue.jsnpmwebpackvue-material

Is it possible to dynamically load a specific div when the page loads, relying on the

I am using JQuery SlideUp and slideDown methods to toggle the visibility of panels. How can I load or display the first record's contact information as a default? Currently, it loads blank because I set the panel's display property to none: < ...

javascriptjqueryhtmlcss

Reposition the button alongside the textarea

Seems like this is a common inquiry. I am still learning the ropes when it comes to CSS and JavaScript. I have a textarea with a button beneath it, and I would like the button to stay aligned with the textarea as I resize it! Any suggestions on how I cou ...

htmlcsstextarea

Display a modal immediately after a successful login to the page

Register form (separate file): <div class="" id="register-form"> <img class="Rpic" src="img/registerpic.png"> <div class="fieldtext"> <h2 class="text-center">Register</h2> </div> <div> <?php ...

javascriptphptwitter-bootstrap

What is the best way to use canvas to precisely draw a line on the display at specific absolute coordinates?

As a newcomer to working with canvas and SVG, I am trying to create a line between two specific coordinates. For example, if I have two rectangles, I need to draw a line connecting their centers: https://i.sstatic.net/Rc6qA.png Here is what I have tried ...

javascripthtmlcsssvgcanvas

What is the best way to create a responsive vocabulary list in columns using CSS and HTML?

Are you looking to create a unique vocabulary list using HTML & CSS with a special formatting? Header (space space space space) Header 2 1. number one text (space space s) 4. number four 2. number two (space space space) 5. number five 3. number ...

htmlcss