Align both the image and text in the center with no space between

How can I center two blocks containing both images and text vertically and horizontally while using flexbox? I notice that when the text is longer, padding appears between the image and the text. How can I remove this padding?1

.product-teaser {
  width: 235px;
  height: 340px;
  margin: 10px;
}
img {
  margin-right: 5px;
}
.product-teaser-stock {
  font-size: 10px;
  font-family: "Open Sans";
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 17px;
}
<!DOCTYPE html>
<html>
<head>
  <title>Another simple example</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <div class="product-teaser">
    <div class="product-teaser-stock product-teaser-stock-undefined date-available" style="color:#009900;">
    <img class="free-shipping-icon" width="30" src="https://shop.dev.pictureserver.net/images/pic/70/3c/undef_src_shop_shop_id_1_type_shipping_image.png" alt="" title="">
    <span class="stock_title">FREE shipping, available from 03.02.2021</span>
  </div>
  <div class="product-teaser">
      <div class="product-teaser-stock product-teaser-stock-undefined date-available" style="color:#009900;">
      <img class="free-shipping-icon" width="30" src="https://shop.dev.pictureserver.net/images/pic/70/3c/undef_src_shop_shop_id_1_type_shipping_image.png" alt="" title="">
      <span class="stock_title">FREE shipping</span>
    </div>
</div>
</body>
</html>

htmlcss

Answer №1

When you center your text, it creates padding between the elements. If you align the text to the left instead, you'll achieve a similar spacing effect.

The issue becomes more evident when you apply word-break: break-all to the stock_title.

A couple of potential solutions could be to align the text to the left or set a specific width that breaks the text into lines within the container. However, this method may not be responsive and will only work for specific font sizes.

Alternatively, consider updating the design by placing the "available from" text on a separate line so that the "free shipping" always remains visually consistent with the image.

.product-teaser {
  width: 235px;
  height: 340px;
  margin: 10px;
}

img {
  margin-right: 5px;
}

.product-teaser-stock {
  font-size: 10px;
  font-family: "Open Sans";
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 17px;
}

Answer №2

The reason for this issue is due to the 'text-align center' setting you applied. If you want both images to be centered, it's best to also make the parent element a flex container. You can achieve this by following this structure:

.product-teaser {
    width: 235px;
    height: 340px;
    margin: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
img {
    margin-right: 5px;
}
.product-teaser-stock {
    width: 100%;
    font-size: 10px;
    font-family: "Open Sans";
    font-weight: 700;
    text-transform: uppercase;
    display: flex;
    justify-content: left;
    align-items: center;
    max-height: 17px;
}

Answer №3

Assuming I have correctly interpreted your query, it seems you are looking to display the text contained within the initial div of a product-teaser .product-teaser.

To achieve this, my recommendation would be to utilize a block element with the stock_title class .stock_title in order to left-align the text and eliminate any gap between the image and the left side.

The following code snippet should assist in achieving this:

.stock_title {
  text-align: left;
}

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

JavaScript to enable button functionality for selected items

Currently, I am developing a To-Do List application. Once users input information, it gets displayed in a table format. My objective is to have the ability to select specific items from this table and apply various button functionalities to them such as ma ...

javascripthtmlfunctionselectbutton

The background image fails to show up on the mobile device display

Currently, I am working on an app with Ionic, but unfortunately, the background image is not showing despite all my efforts. I have gone through various solutions provided in previous questions, but none of them seem to work for me. Here is the CSS I am u ...

htmlcssangularjsionic-framework

Tips for inserting a pin into a designated location on an image map

Within my angular application, I have implemented an image map using the HTML usemap feature. Here is the code snippet: <img src="../../assets/floor2.jpg" usemap="#floor2Map"> <map name="floor2Map"> <area shape="pol ...

htmlcssangulartagsimagemap

Background image not displaying in new tab after Chrome extension installation

I have been developing a Chrome extension that alters the background image of a new tab. However, I have encountered an issue where the background image doesn't change the first time the extension is loaded. This problem has also occurred very occasi ...

javascriptcssgoogle-chromegoogle-chrome-extension

Utilizing jQuery to toggle a dropdown box based on multiple checkbox selections

After conducting a search, I came across a helpful resource on Stack Overflow titled Enable/Disable a dropdownbox in jquery which guided me in the right direction. Being new to jQuery, I found it useful to adapt code snippets to suit my needs. Now, my que ...

javascriptjqueryhtml

JavaScript's Math.round function does not always produce accurate results

After adding the specified line within the function, the code seems to encounter issues. parseLocalFloatCnt: num = Math.round(num*1.2); Is there a solution available for this problem? Your help is much appreciated. <!DOCTYPE html> <html> < ...

javascriptjqueryhtml

Is it possible to hide and reveal specific form elements based on the selection of a checkbox?

Having issues with the code provided below, it's not working as expected. Can you help me figure out what I might be missing? HTML: <input id="id_code_col" type="checkbox" name="code_col"></input> SCRIPT: $(document).ready(function(){ ...

javascriptjqueryhtmlforms

Tips on gathering information from an HTML for:

After encountering countless programming obstacles, I believe that the solution to my current issue is likely a simple fix related to syntax. However, despite numerous attempts, I have been unable to resolve it thus far. I recently created a contact form ...

javascripthtmlnode.jsjsonexpress

Guide on transforming a Java multiclass applet into an HTML file

Can someone help me with converting three Java classes saved as .java into an applet in HTML? I've been advised to convert it to a .jar file, but I'm not sure how to do that. Can anyone provide a step-by-step guide, preferably using NetBeans? ...

javahtmlobjectjarapplet

Maintain the basic structure while ensuring divs are properly aligned

Behold, my div structure! ONE // at the top level TWO THREE // two divs side by side in the middle level FOUR // residing at the bottom <div id="ONE"> <div></div> <div><img src="logo.png"></div> </div> < ...

htmlcss

Create a cylindrical HTML5 canvas and place a camera view inside the cylinder

I have a unique project in mind that involves creating an HTML5 canvas cylinder with the camera view at its center. The walls of the cylinder will display images, and the entire structure should be able to rotate and zoom. If anyone has any advice on how ...

javascriptjqueryhtmlcanvas

Preserving the video's aspect ratio by limiting the width and height to a maximum of 100%

I am trying to integrate a YouTube video using their embed code in a "pop-up". However, I am facing an issue where the video does not resize to fit within the height of its parent. I want it to be constrained by the div#pop-up that contains the video. Curr ...

javascripthtmlcssvideo

Manipulating the visibility of a template with ng-show and ng-hide

Is it possible to use ng-show and ng-hide in order to display or hide an HTML template, particularly if that template is a separate HTML file? I am attempting to divide my HTML file into two sections and toggle their visibility based on an event. ...

htmlangularjs

Introduce a transition effect to the MUI Chip component to enhance user experience when the Delete Icon

When the delete icon appears, it is recommended that the overall width of the chip increases smoothly rather than instantly. Here is the current code structure: CSS: customChip: { "& svg": { position: "relative", display: &quo ...

cssreactjsmaterial-ui

How can I specify the exact width for Bootstrap 3 Progress Bars?

I have a single page that displays all my files in a table format, and I also have the count of open and closed files. My goal is to represent the percentage of closed files using a progress bar. The width of the progress bar should change based on this p ...

javascripthtmlcsstwitter-bootstrap-3

css failing to load properly following javascript redirection

Upon clicking the button labeled id=cancel, the user will be directed to index.php. $('#cancel').click(function() { if(changes > 0){ $('#dialog-confirm').dialog('open'); }else{ window.location.href = ". ...

javascriptjqueryhtmlcssdom

Using AJAX in Laravel Blade to bypass the specified div class

As a beginner in AJAX JavaScript, I have been trying to filter data in Laravel 10 without refreshing the page using AJAX, but so far I haven't had much success. Below is the code snippet from my blade view: <script src="https://code.jquery.co ...

javascripthtmlajaxlaravellaravel-blade

Align navigation bar using Angular Material

Trying to center my navbar has been a struggle for me. I attempted using 'layout-align='space-between center' but it's not taking up 100% width and is acting more like an inline element. I've been following the documentation close ...

cssangularjsflexboxangular-material

Utilizing jQuery for serializing unorganized lists

I have created multiple lists within a list and I need to pass the IDs using jQuery to another PHP file (updateDB.php). I attempted to serialize the list data but was unsuccessful. I'm not certain if I have implemented it correctly, I searched extens ...

javascriptjqueryhtml

Show Zeroes in Front of Input Numbers

I am working with two input fields that represent hours and minutes separately. <input type="number" min="0" max="24" step="1" value="00" class="hours"> <input type="number" min="0" max="0.60" step="0.01" value="00" class="minutes"> This se ...

javascriptjqueryhtmlcss