Display Text Aligned in the Middle Beside Website's Logo

Newbie to HTML and CSS here!

I'm attempting to achieve a design similar to this: https://i.sstatic.net/HyiP3.jpg

Below is my code snippet:

<div id="topbar">

    <div class="image">

      <img src="images/ghwlogo.png">

    </div>

    <div class="text">

      <h1>TEXT TEXT TEXT TEXT TEXT</h1>

    </div>

</div>

I've experimented with floating the topbar div and setting it to display inline, but couldn't get it to appear side by side horizontally.

I am feeling overwhelmed. While following tutorials is straightforward, problem-solving on my own seems like a whole different challenge.

I believe I may have missed a crucial step somewhere. This task appears simple in theory, yet proves quite tricky in practice.

htmlcss

Answer №1

img {
  display: inline;
  vertical-align: middle;
  }

.subhead {
  display: inline;
  vertical-align: middle;
  }
<div>
    <img src="http://dummyimage.com/100x100/000/fff"/>
  <h1 class='subhead'>
    TEXT
  </h1>
</div>

I like to keep the HTML minimal and use CSS where possible for styling effects. If needed, additional elements can be added with proper CSS adjustments.

There are different approaches to arranging elements horizontally:

Floating: Although it was popular before, floating elements can disrupt layout flow and height calculations.

Display Inline: Acts as text, limiting customization options like height or other attributes.

Display Inline-Block: A versatile method for horizontal layouts with added style properties like height or borders.

Position Absolute: Allows precise positioning within a relative parent element. Use cautiously to prevent overlapping issues and rely less on fixed pixel values.

Vertical alignment is crucial after achieving horizontal layout. Consider all elements in the container like letters in a sentence, adjusting alignment individually based on size. Ensure images also have correct vertical alignment for consistency.

Answer №2

UPDATE: revised response based on @Katana314's suggestion. I have retained the original poster's formatting.

#topbar {
width: 100%;
overflow: hidden;
}
.image {
    display: inline-block;
    vertical-align: middle;
    border: 5px solid black;
    height: 100px;
    width: 100px;
}
.text {
    display: inline-block;
    vertical-align: middle;
}

Check it out on Fiddle: https://jsfiddle.net/dgautsch/che0dtfk/

Answer №3

Separating the image and text in different div elements, both can be placed under the inline-block attribute. Ensure that the text div has a position: absolute attribute for proper formatting.

To adjust the spacing, modify the left position attribute after reviewing the Fiddle here: https://jsfiddle.net/kuLLd866/.

HTML:

<body>
    <div class="image">
        <img src="http://gfx2.poged.com/poged/game_logo_default_fix.png?2492">
    </div>

    <div class="imagetext">
        <h1>Text text text</h1>
    </div>
</body>

CSS:

.image {
    display: inline-block;
}

.imagetext {
    position: absolute;
    top: 50px;
    display: inline-block;
}

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

issue with retrieving HTML data from PHP and converting it to JSON

I've tried multiple search queries but nothing seems to be working. Can someone please assist me? ----------jQuery Function ---------------------------- function showRequestFunctionToBox(thisId){ var encodedItemId = thisId; ...

phpjqueryhtmljson

Challenge with CSS Box Shadow

Hey there, I've been attempting to add a shadow effect to a box inside another box but I'm struggling to achieve the desired outcome. <div class="box effect2"> <div class="box effect2"> Box inside a box <div> &l ...

css

Error in saving webpage as HTML

I have integrated FileSaver.js into my project to enable users to save web pages as HTML. The code below is triggered when a user clicks on the download button: var originalstr=$.ajax( { type: "GET", url:"url", async: false }).resp ...

javascriptjqueryhtmlajaxfilesaver.js

Difficulty with routing stylesheets in my Node Express server

Currently, I am setting up the back-end structure for my website. The file setup looks like this: public css main.css main_b.css index.hbs index_b.hbs server server.js To reference style sheets in the index files, I use link attributes wit ...

cssnode.jsexpress

Could you provide some advice for creating a Single Page website?

I am working on a simple HTML setup with various elements such as a navbar and content blocks. <html> <head> <title>My HTML5 App</title> <meta charset="UTF-8"> <meta name="viewport" content="wid ...

javascriptjqueryhtml

Replacing a JSON vault using XHR: A step-by-step guide

Can someone assist me in replacing the JSON data from a JSON file on a website using JavaScript XHR? setagaya.json: {"trains":[{"operation_number":1,"line_id":26007,"station_id":784,"track_number":1,"up":true},{"operation_number":2,"line_id":26007,"stati ...

javascripthtmljson

Creating an organized layout with multiple bootstrap toasts in a grid formation

Is there a way to create multiple Bootstrap Toast elements side-by-side and top-to-top? For more information, visit: https://getbootstrap.com/docs/4.2/components/toasts/ <div aria-live="polite" aria-atomic="true" style="position: relative; min-height: ...

htmlcssbootstrap-4toast

Unable to change the background color of h1 tag in a ReactJS project

import React from 'react' export default function Home(){ return<div> <h1 className="bg-dark text-white p-3">Home Page</h1> </div> } I am attempting to modify the background color of the h1 tag in my Reac ...

javascriptcssreactjsbootstrap-4

Are iFrames being utilized for third-party applications?

I am looking to create a web application that can be extended by other developers with their own applications. Would using iFrames, similar to how Facebook does it, be the best approach? Is this considered a good practice in web development? Are there a ...

javascriptpythonhtmlruby

The Jquery map function is not returning selected options, always returning empty values. It seems to be avoiding the variable, although it functions properly on jsfiddle. There are

RESOLVED: Final solution: http://jsfiddle.net/AcfUz/220/ *applied the selector mentioned in the selected answer and adjusted the console.log value to appear before the text input, where the chosen options were supposed to be displayed, and voila--it&apo ...

javascriptjqueryhtmleachmulti-select

Ways to apply a border-bottom to tr elements without affecting td elements

Is there a way to add a bottom border to <tr> elements without affecting <td> cells that have no border? I attempted the following approach, but setting border: 0 for <td> overrides the border for all <tr> elements as well, leaving ...

css

Tips for maintaining the alignment of four buttons in a single row as the size of the screen changes

I'm creating a simple browser game as part of my web development learning process. I have a set of divs that represent a warrior, and at the head of the "div table" I have a group of 4 buttons arranged horizontally. However, when the screen size is re ...

htmlcss

Exploring array data retrieval in Angular

I need to display various inch sizes for different bike models. I have a json file containing an array of bike data. [{ "name": "Mountainbike", "img_url": "assets/img/mountainbike.jpg", "mount_size": [{&quo ...

htmljsonangular

Apply an opacity setting of 0.5 to the specific segment representing 30% of the scrollable div

I have a scrollable container for displaying messages. I would like to apply an opacity of 0.5 to the content in the top 30% of the container, as shown in this image: https://i.stack.imgur.com/NHlBN.png. However, when I tried using a background div with a ...

javascripthtmlcssreactjs

Angular directive button failing to trigger ng-click event

Recently, I started working with Angular and ran into an issue while trying to set up a custom directive. The purpose of this directive is to display a button upon hovering over it, which, when clicked, should trigger a function within the directive. The b ...

javascripthtmlangularjsangularjs-directive

The Next.js application is unable to load the combined CSS from a React Component Toolkit

My React components repository includes individual .css files for each component which are imported into the respective components. These components are then bundled using a rollup configuration and published as an NPM package, with all component CSS being ...

cssreactjswebpacknext.jsrollup

Acquiring HTML form data using JavaScript

Although it may seem trivial, I'm facing a challenge. I have an HTML form that is dynamically generated by JavaScript and populated with initial data fetched from the server. The form is displayed correctly with the pre-filled data. My goal is to allo ...

javascriptjqueryhtmlforms

I am having trouble grasping the concept of CSS and the first-child selector

I am having an issue with the first-child selector in CSS. I have two divs with the same class, each containing an image and a paragraph element. When I use the .div-class:first-child {margin:10} rule, the margin is only applied to the paragraph in the fir ...

htmlcss

React is encountering a problem with loading the image source and it is

<img src="play.jpg" alt="play"></img> This code works fine in standard HTML, but I'm having trouble getting it to work in React. Is adding it as a background the only solution? ...

javascripthtmlcssreactjsimage

Underline Rows in CSS

When designing my website, I decided to organize the content into rows using CSS instead of tables. To create a line separating each row, I used height:px; for each row manually. However, this method resulted in the line jumping around inconsistently acr ...

csshtmlrowborder