Header text aligned with image to accommodate parent size

Having trouble aligning an image/logo next to my header text while maintaining its aspect ratio and fitting within the container size. The goal is to have both the text and image horizontally centered. The parent div cannot have a fixed height as it needs to adjust based on the text size. I've experimented with using tables and before: pseudo elements, but haven't found a solution yet. Here's what I have so far, but it's not working as intended.

.batman {
  font-size: 20px;
  font-weight: bold;
  display: inline-block;
  width: 100%;
}

.batman img {
  min-width: 100%;
  min-height: 100%;
}
<div class="batman">
  <img src="https://i.imgur.com/JSWi9SB.png" /> title goes here
</div>

jsfiddle: https://jsfiddle.net/sxd91gqc/

htmlcss

Answer №1

To ensure the text stays within one line, set the height equal to the line-height:

.superman {
  font-size: 20px;
  font-weight: bold;
  display: inline-block;
  line-height: 1.2em;
  border: 1px solid blue;
}

.superman img {
  height: 1.2em;
  vertical-align: middle;
}
<div class="superman">
  <img src="https://i.imgur.com/JSWi9SB.png" /> title goes here
</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 to change the padding in bootstrap container

I'm working with a div that has the container bootstrap class applied to it. This class adds a 15px padding on the left and right sides. I want to maintain this padding for all the children elements within the container, but I also want one specific d ...

htmlbootstrap-4

Discovering specific values for an ID using API calls in Angular (Implementing CRUD Operations in Angular with API Integration)

My current project involves CRUD operations in Angular utilizing the API created in Laravel. I have successfully added and fetched values, but encountered an issue when attempting to update values using their respective IDs. This snippet is from my app.co ...

htmlangularlaraveltypescriptcrud

Automatically populating form fields with Selenium (less-than-stellar HTML present)

My current task involves: Entering my email Clicking submit If the message "check again later" is displayed, repeat until the message changes to "you are in!" Here's the code snippet I have written so far: PATH = "D:\Program Files (x86)&bs ...

pythonhtmlselenium

Customize Individual Rows in a React DataGrid

I am exploring the world of Material UI React data grid for the first time, and I am looking to add a unique background color to only the initial three rows. Each row should have a different color scheme that remains static, without any interactions trigge ...

cssreactjsdatagridmaterial-ui

The header logo will have an absolute position to overlay the navigation menu when the screen is resized

I am currently working on a website layout that involves using position: absolute for the logo to overlay another div below it, purely for stylistic reasons. While I have achieved this effect, it doesn't translate well into responsive web design. When ...

htmlcss

Tips for passing a page as an argument in the function parameter of the page.evaluate() method?

I keep running into this issue when I pass the page as an argument: TypeError: Converting circular structure to JSON --> commencing at object with constructor 'BrowserContext' | property '_browser' -> object with const ...

javascripthtmlnode.jsdom-eventspuppeteer

Can an <option> element in WebKit be customized by adding an icon to it?

I have integrated a WebView into one of my software applications, and within the HTML page it is rendering, there is a <select> tag. I am interested in enhancing the <option> elements within this select tag by adding icons to them: (The shadow ...

htmlcssmacoswebview

Setting the default value in a Select tag using React

Within this particular Select tag, the goal is to establish an initial value and assign that value to a variable named name. The Select tag itself includes the following: <Field name="data.account" render={({ field: { name, ...restFieldProps } }) = ...

javascripthtmlreactjsdrop-down-menu

The width of the TD element does not affect the grid

<div id="unique-example" class="k-unique-content"> <table id="unique-grid" style="float: left; position: relative"> <thead> <tr> <th width ="410px"data-field="UniqueFileName">Unique File Name ...

htmlcssrazor

Immediate display of collapsed/toggle menu in a Bootstrap navbar

I have created a bootstrap responsive navigation menu that collapses into a box when the page is resized. It's a standard menu with bootstrap, but I'm facing an issue where the menu automatically appears when the page gets small instead of needin ...

htmlcsstwitter-bootstrapmenuresponsive-design

What is the best way to position a small square box over each td element containing text using css?

Currently, I am in the process of developing an HTML table where I would like to incorporate a square box around each td element using CSS <tr> <td style="width:8%; text-align:center; border: 1px solid #000; margin-left: 30px;"><?php e ...

htmlcsshtml-table

Ways to retrieve the href attribute value from an element in Python/Selenium even when there is no explicit href attribute present

I am facing an issue with retrieving the URL link from an element using the get_attribute('href') method. It returns a null value, as if the element does not have a href attribute. webdriver.find_element_by_xpath('//*[@id="__next"] ...

pythonhtmlseleniumselenium-webdriverhref

Easily validate the contenteditable attribute of <td> element

I am currently working on a table that displays data from a MYSQL database. Whenever a user makes changes to an element in the table, I want the database to be updated using AJAX. Below is my JavaScript code for sending data in an editable row. function s ...

javascriptjqueryhtmlmysqlajax

Dynamic Data Drive Multi-Series Line Graph

I am currently working on creating a D3 line chart. I have taken the code from the block builder and adjusted it with my own data. While the code is functional, I'm facing an issue where the labels are not showing up when I hover over the line. My ma ...

htmld3.js

How can I locate the CSS selector for a text message?

Looking for a CSS selector to target the message "Congratulations! displayed after successfully filling out a registration form with Selenium Web driver. Need to assert the text "Congratulations, Your email has been verified". Here is the HTML code: <d ...

cssseleniumselenium-webdriver

Best practices for making an AJAX call to fetch information from a database

I have a database containing a single table. The table includes columns for Company and Time, among others, with Company and Time being crucial. Users can make appointments by filling out a form. Within the form, there are 2 <select> elements - one ...

javascriptc#jqueryhtmlajax

Integrate Vue.js with Laravel

Hey there fellow developers, I'm a university student who is new to using frameworks. Recently, I completed a project for my internship using the Laravel framework for the back end. Now, I want to tackle the front end using VueJS. Can anyone guide me ...

htmllaravelvue.js

Is Webkit's Overflow Scrolling feature hiding the divs on your website?

I recently implemented a design for my website where the content is contained within an absolute positioned div that takes up the entire screen. However, I noticed that the scrolling on this div felt clunky and not as smooth as I would like it to be. After ...

htmlcssiosmobile-safari

When the button with an image is clicked, it will display a loading element

I have developed an application that heavily utilizes ajax, and I am looking to implement the following functionality: I would like to have a button with both text and an image. When this button is clicked, it should be disabled, and instead of the origina ...

javascriptjqueryasp.net-mvccssajax

Issue with rendering components list in React.js

I am currently working on a project using React, and I'm facing an issue where my list is not displaying on render(). In my parent component, I have a list of components coming from SearchResult. Below is the relevant portion of my code: class Create ...

javascripthtmlreactjscomponents