Show text and image side by side on the same row

I am looking to showcase both image and text on the same line, similar to how it's done on tripadvisor.in/

<div style="display:inline-block"> 
<div style="display:inline;float:left">
<a href="CollegeProfile.php" class="white">
<h4 style="margin-bottom:10px;display:inline">Great place for learning</h4></a>
<br /><a href="CollegeProfile.php" class="white">Check out reviews of Indian Institute of Management, Ahmedabad</a>
</div>
</div>


<div style="display:inline-block">
&nbsp;<img class="shakeImage" src="assets/img/author.jpg" style="border: 1px solid white;height:60px;display:inline" />
</div>

This code snippet achieves displaying both image and text on the same line.

css

Answer №1

If you find yourself needing to utilize div elements, you can achieve that with the following code:

Check out this Demo Fiddle

HTML

<div class='table'>
    <div class='cell'>
       <a href="CollegeProfile.php"><h4 >Great college worth considering</h4></a>
       <a href="CollegeProfile.php">Explore reviews of Indian Institute of Management, Ahmedabad</a>
    </div>
    <div class='cell'>
        <img class="shakeImage" src="assets/img/author.jpg" style="border: 1px solid white;height:60px;display:inline" />
    </div>
</div>

CSS

.table {
    display:table;
}
.cell {
    display:table-cell;
    vertical-align:middle;
}
h4 {
    margin:0;
}

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

A guide on integrating a data deletion feature in Angular applications

On our website's edit page, there is a list of mat cards/workspaces with an edit icon in the top corner of each workspace. Clicking on the edit icon will take you to the edit page for that specific workspace. Within this edit page, there is a delete b ...

htmlcssangularfunctionfilter

What could be causing justify-content: flex-start; to not function as expected?

Can someone help me with my flexbox navbar? I set the justify-content property to flex-start, but the content inside the container is not aligning correctly. You can see the output and code here: output html, body { backgr ...

htmlcssflexboxresponsive-design

Move the container all the way to the left

On my page, I have a grey section with the heading 'Start Analysis' that needs to be shifted to the left along with all its contents. How can this be achieved? The HTML code for the section is as follows: <!DOCTYPE html> <html lang="en ...

htmlcsstwitter-bootstrap-3

Creating button groups with a centered .btn using Bootstrap 4

My button group has a link in the middle, so it needs to be an a tag. I could change it to a button and use JavaScript for navigation, but I'd prefer not to. Here is the code: <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bo ...

htmlcsstwitter-bootstrapbootstrap-4

Finding the xPath for a particular line within a node that contains more than one line of text

My HTML code resembles the following structure: <div class='textContainer'> <div class='textLabel'> </div> <div class='text'> "First Line of text" "Second Line of text" "Thir ...

htmlcssxpath

Struggling to get the nth-child selector to function properly in IE8

Looking for a solution to alternate colors in a table? Here's what I tried: #grid tr:nth-child(odd) { background-color:#eee; } #grid tr:nth-child(even) { background-color:#fff; } Unfortunately, this works in Firefox but not in IE8. After some i ...

cssinternet-explorer-8css-selectors

Choose the option for overseeing safaris

Hello there! I need some help with Safari. Can you please guide me on how to disable the arrows? https://i.stack.imgur.com/1gzat.png ...

javascriptcssvue.js

CSS media queries with precise inequality restrictions

Imagine the following scenario: @media only screen and (max-width: 600px) { nav { display: none; } } @media only screen and (min-width: 601px) { nav { display: block; } } This setup can lead to undefined behavior for a wid ...

htmlcssmedia-queries

Layer divs on top of each other without explicitly defining their stacking order

I am looking to stack multiple tile divs on top of each other by using negative margin-right: -10px. My goal is to have the previous div displayed on top, with new sibling divs appearing below it. Currently, the newer div overlaps the previous one. While ...

htmlcss

The anchor element does not trigger the activation process within a flexbox item

I have a flex container that contains multiple items. Instead of using the anchor tag to enable a link when clicked, I am setting the flex item class inside it. The element is comprised of three divs: The first div is a circle with an icon, the "second" d ...

htmlcssflexboxanchor

Having trouble getting CSS Animation to work in a React project?

I am currently developing a Next.js application using React. const partyButton = useRef(null) const handleParty = () => { setTimeout(() => { partyButton.current.classList.add('party-time'); console.log(party ...

javascriptcssreactjsnext.jsreact-hooks

Use JavaScript to limit Google Analytics and Yandex.Metrica to track only the referral sources and screen sizes

I prefer not to include external JavaScript on my website for unnecessary tracking purposes. However, I do need to gather referrer and screen size information, which cannot be achieved with a regular HTML img tag alone. What is the most standard-complian ...

javascripthtmlcssgoogle-analyticsyandex-api

Can you tell me the Bootstrap 4 equivalent class for '.well'?

While using bootstrap-3, the .well class can be utilized to create a rounded border around an element with a gray background color and padding. <div class="well">Basic Well</div> However, it seems that there is no .well class available in boo ...

csstwitter-bootstraptwitter-bootstrap-3bootstrap-4twitter-bootstrap-4

The grid feature in the Bones theme is malfunctioning and causing issues

I am currently using the Bones theme from Themble, which has a grid system in its design. I attempted to apply this grid system to the header of my website in order to transform menu items into icons on mobile devices and display the full menu on desktop s ...

htmlcssgridmenuitem

Bringing elements into perfect harmony in Angular

Seeking guidance on HTML alignment using bootstrap for prebuilt components like buttons. Struggling with aligning divs and looking to learn more about grouping them together for proper alignment. Goal is to center elements on screen one above the other. ...

htmlcssangularangular-ui-bootstrap

Is there a way to convert a button into clickable text that performs the same function as the original button?

Seeking a solution to transform a button into clickable text with the same functionality. Explored resources like Google, StackOverFlow, and Youtube for answers. This is the current code snippet representing the button: <button onclick="mainApp.l ...

javascripthtmlcss

Having trouble interacting with an element using Selenium in Python

I am trying to figure out how to download an image from Instagram, but I cannot seem to programmatically click on the download button of this page. Even after attempting to use XPath and CSS selector methods for clicking, unfortunately, neither seems to w ...

pythonhtmlcssseleniumautomation

Unable to vertically align images in the carousel

Greetings! I am currently working on my website www.acigaiabeta.esy.es and I am facing an issue with aligning the images of the carousel to the center vertically. Despite trying various solutions, such as following tips from this resource, the images remai ...

htmlcss

Element in list displaying a distinct alignment from the rest

I currently have a navigation bar based on a list, which looks something like this: https://i.stack.imgur.com/e1Dmb.png My concern is how to position the "Logout" item on the right side of the screen. I've tried adding clear list items but that seem ...

htmlcsslistnav

Tips on stopping slideToggle from opening and closing when clicked for the first time

When using the slideToggle function, I'm encountering an issue where the content div briefly shows on the first click but then immediately slides closed. Subsequent clicks work as expected and slide open correctly. This is the Jquery script I have be ...

javascriptjquerycssslidetoggle