Alignment for picture and words

Shapely
1

WhatsApp Image 2024-03-28 at 12.17.55 AM
WhatsApp Image 2024-03-28 at 12.17.55 AM1600×845 126 KB

Website: VData Payroll Outsourcing (VPO) – People. Process. Productivity

Hi, I want to make the images and words align at a same line so that it can look more tidier. Either the words move closer to the middle, or the images move closer to the “line” (that i draw for better understanding). Is there any method/suggestions for me to do so in order to make it looks more tidier?

Thank you!

2

To align images and text on the same line and make your layout look tidier, you have a few options:

  • Use CSS Flexbox: You can use CSS Flexbox to easily align items in a row. Wrap your images and text in a container element, then apply display: flex; to the container and adjust the alignment properties as needed. For example:
.container {
    display: flex;
    align-items: center; /* Align items vertically in the center */
}

  • Adjust Margins and Padding: You can adjust the margins and padding of the text or images to move them closer to each other. Experiment with negative margins or reduced padding to achieve the desired alignment.

  • Adjust Line Height: If your text is vertically aligned but still looks too spaced out, you can adjust the line height of the text to make it tighter. Reduce the line height until the text aligns nicely with the images.

  • Use Inline-Block Display: Set both the images and text to display: inline-block; to make them align horizontally. Then adjust the vertical alignment as needed.

  • Use CSS Grid: If you need more control over the layout, you can use CSS Grid to define specific grid areas for your images and text. This allows you to precisely position elements on the page.

Here’s a simple example using CSS Flexbox to align images and text on the same line:

HTML

<div class="container">
    <img src="example.jpg" alt="Example Image">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

CSS

.container {
    display: flex;
    align-items: center;
}

.container img {
    margin-right: 10px; /* Adjust as needed */
}

Adjust the CSS properties and values according to your specific layout requirements and design preferences. If you need further assistance feel free to provide more details about your layout or share your code, and I can offer more specific advice!

3

Hey there,

@nelson thanks for your input but your solution is not related to the main topic of this ticket, its out of this topic.

Regards,

5

Hey there,

@Mubashir88 thanks for your input, we appreciate your attention here, but the problem is already resolved.

Regards,