Utilizing flexbox for horizontal alignment of an image and text

I'm having trouble with using flex to align an image and text horizontally on the same line. I have tried align-items: center, but it did not work as expected.

Using align-items: flex-start; seemed to somewhat align them horizontally, but it's not quite precise enough for what I need.

I am unsure of why this is happening. Any help in achieving a precise horizontal alignment would be greatly appreciated. I attempted to add style="vertical-align:middle;" to the <img> tag, but that also did not work as intended.

.entrepreneur {
  display: flex;
  align-items: flex-start;
  vertical-align: middle;
}

.entrepreneur img {
  width: 35px;
  margin-top: 0;
  margin-bottom: 0; 
}

.entrepreneur #text {
  margin-left: 10px;
  margin-top: 0;
  margin-bottom: 0
}


    
<div class="entrepreneur">
  <img src="img/Mark.jpg" alt="">
  <p id="text">Mark</p>
</div>

htmlcssflexbox

Answer №1

By default, flex direction is set to row. When you use justify-content, it centers items on the horizontal axis, and align-items will vertically align the items. Switching the direction to column will flip this behavior.

#container{
display:
flex;
justify-content:space-evenly;
align-items:center;}
<div id='container'>
<img src='https://via.placeholder.com/350'>
<p>some text</p>
</div>

Answer №2

#container {
  display: flex;
  place-items: center;
}

p {
  margin-left: auto; // Just as an illustration
}
<div id="container">
  <img src="https://via.placeholder.com/350">
  <p>TEXT...</p>
</div>

Regarding the usage of place-items: https://developer.mozilla.org/en-US/docs/Web/CSS/place-items

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

What can be done to stop slideToggle from continuously triggering when hovered over multiple times?

After receiving a list of images, I noticed that Lorem Ipsum text appears every time the mouse hovers over the li elements. However, if you quickly move the mouse from one list element to another, the slideToggle function continuously activates and deactiv ...

jqueryhtmlcsscursorslidetoggle

How can I troubleshoot the unresponsive remove div function on my website?

My code is running fine on CodePen (link provided below), but for some reason, it's not working properly in the web browser. I am executing the code from localhost and the button isn't responding as expected. CODE Here is my Visual Studio code ...

javascriptjqueryhtmlbootstrap-4

Tips for obtaining the HTML document as a string within an Android web browser

I am trying to retrieve the source code (HTML document) of a webpage when it loads in my code. I have written a function onPageFinished() with view.loadUrl("javascript:(function() { document.getElementByTagName('html')[0].innerHTML"); to get the ...

javascriptandroidhtmldomhtml-parsing

Is it possible to select a checkbox using BeautifulSoup or Selenium?

Currently, I am getting familiar with Selenium and BeautifulSoup, but I'm facing a challenge with the following scenario: I have a collection of product codes: ['1242737-011', '4232345-015', '5673845-013'] My goal is t ...

pythonhtmlseleniumbeautifulsoupselenium-chromedriver

Having trouble installing css-sprite on Windows 8.1 using NPM

Having trouble installing css-sprite on my Windows 8.1 system. Here's what I have installed so far: Windows 8.1 (x64) Node.js 0.12 (x86) NPM 2.5.1 (x86) Python 2.7.9 (x86) Visual Studio 2013 Express (x86) I tried to install using the command: npm ...

pythoncssnode.jsnpm

Ways to create a uniquely scrollable div in React Bootstrap

Currently, I'm working on implementing React Bootstrap for my website. I am having trouble figuring out how to make only one specific div scrollable while keeping the others fixed. Below is a snippet of my code located in App.js import * as React from ...

cssreactjsbootstrap-4react-bootstrap

Troubleshooting an Issue with MediaStreamRecorder in TypeScript: Dealing with

I've been working on an audio recorder that utilizes the user's PC microphone, and everything seems to be functioning correctly. However, I've encountered an error when attempting to record the audio: audioHandler.ts:45 Uncaught TypeError ...

javascripthtmlaudiotypescriptmedia

eliminate odd gaps

Query: Is there a way to remove the space shown in the first image? Additional Information and Code: I am working on displaying a list of contacts one above the other. When a user hovers over a contact's name, a contact card appears with an email i ...

htmlcss

The second modal button is failing to open the modal

I'm having an issue with two buttons located next to each other. The first button opens a modal with the data-target of #myModal, but when I click on the second button with the data-target of #largeModalTwo, it only dims the screen without opening any ...

htmlbootstrap-modalbootstrap-4

Hosting services for forms and JSON data

I have recently completed the development of my website using HTML, CSS3, jQuery, and JavaScript. Like many others, it includes a form for clients to submit their projects via email. After some research, I came across suggestions to use NodeJS for server-s ...

javascriptjsonnode.jshtmlweb-hosting

The H1 tag is mysteriously displaying padding or margin on the bottom, despite not being set

Despite not setting any padding or margin for the H1 tag, it still appears to have some spacing at the bottom. After applying a margin and padding of 0 to both the h1 tag and the text below it, I am still facing an issue where the text doesn't align ...

htmlcss

What is the most effective method for implementing popups and dialogs using JQuery?

I had previously created popups/dialogs, but have now encountered a regression error when trying to use them. I am looking to recode them using JQuery for the DIVs/popups/dialogs. Transitioning to JQuery would offer the advantage of enabling repositioning ...

javascriptjqueryhtmlcss

Tips for efficiently saving an HTML file in TextEdit to ensure it opens flawlessly in a web browser

I recently created a basic HTML file in TextEdit on my Mac. Here is how it looks: <html> <head> <title>My First Web Page</title> </head> <body> <h1>Welcome to My First Web Page</h1> < ...

htmltextedit

Selenium can locate an element by its CSS selector that comes after a specific element

How can I locate the text "Interesting" which is the first occurrence of the class b after h1.important when using Selenium? <div class="a"> <div class="b">Not interesting</div> </div> <div class="title"> <h1 c ...

pythoncssseleniumxpathcss-selectors

What is the reason this :class="{}" is not functioning properly in Vue.js?

I have created a simple file that contains a reactive Array of objects where each object has a property called "checked" which is a boolean that toggles based on a checkbox. I am using a v-for directive to iterate through the array of employees and render ...

javascriptcssvue.jsfrontendvuejs3

Incorrect legend colors in Highcharts pie chart

[![enter image description here][1]][1] There seems to be an issue with the Pie-Chart where the Slice color and the Legend color do not match when the color is set using className. This problem does not occur with some other charts. If you look at the co ...

csschartshighcharts

What is the best way to determine the variable height of a div in Angular 7?

I'm currently trying to use console.log in order to determine the height of a div based on the size of a table inside it. This information is crucial for me to be able to ascertain whether or not a scrollbar will be present, especially within a dialog ...

javascripthtmlangularviewchild

incorporating some margin to the left side of a text block

Is there a way to use margin-left:20px; to move a bullet point list on my webpage 20px inwards? <li>• Service level agreements to match your needs from next business day response to a two hour fix</li> <li>• 24x7x365 service coverage ...

htmlcsshtml-lists

Curved edges achieved without the need for relative positioning

Can anyone help me with a specific code snippet to achieve rounded corners for this page ? Currently, I am using the PIE.htc file which only works when I declare position:relative; throughout the layout, causing disruptions. Is there a code workaround that ...

htmlcss

Only one admin account can be accessed at a time by multiple logins

I am looking to add a new feature to my app where only one admin can log in at a time. If someone else tries to log in with the same admin ID on another device, a warning should be shown, indicating that the user is already logged in and cannot access the ...

htmlreactjs