Issue with logo not displaying as expected using Display flex in HTML and CSS

Hi everyone, I hope you're all doing well.

I'm a beginner in web development and I've been following a tutorial on YouTube. However, at around the 5:20 timestamp, I noticed that my code is not producing the same result as shown in the video. Can someone please help me figure out what's wrong?

Edit: I attempted changing to display: inline-flex;, but the issue still persists.

Expected Result based on video:

https://i.sstatic.net/7S2d4.png

Actual Result I am getting:

https://i.sstatic.net/fX9O7.png

.sidebar header .image-text {
  display: flex;
  align-items: center;
}
<nav class="sidebar">
  <header>
    <!-- ===== Logo ===== -->
    <div class="image-text">
      <span class="image">
                    <img src="https://via.placeholder.com/100jpg" alt="candlestick logo">
                </span>
    </div>

    <!-- ===== Logo Text ===== -->
    <div class="text header-text">
      <span class="name">TradeJournal</span>
      <span class="creator">By RS</span>
    </div>
  </header>
</nav>

htmlcssflexbox

Answer №1

the first step is to ensure that the code functions properly

1. confirm the presence of the image 2. verify the span (text)

both elements should share a common parent within the HTML structure
for example, in this scenario it would be .image-text, while in your case it is the <header>

you might ask yourself: "I've applied the same CSS rules, so why isn't it working?"

indeed, the issue lies not with your CSS, but rather with the HTML markup!

❌ here is your previous HTML snippet:

<nav>
 <header>
   <div class="image-text">
     <!-- insert image tags here -->
   </div>

   <!-- text content (error: placed outside .image-text) -->
  </header>
</nav>

✅ whereas the corrected code should appear as follows:

<header>
  <div class="image-text">
    <!-- insert image tags here -->
    <!-- text content here -->
  </div>
</header>

rest assured, the CSS remains intact and functioning correctly!

wishing you continued progress with your learning journey!

Answer №2

Implement flexbox in the header section

.navigation-header {
display: flex;
align-items: center; }

Answer №3

The correct way is to apply the flex property on the parent element, not the child 

.sidebar header{
display: flex;
align-items: center; }

Answer №4

.sidebar header {
  display: flex;
  align-items: center;
  justify-content:center;
}
<nav class="sidebar">
  <header>
    <!-- ===== Logo ===== -->
    <div class="image-text">
      <span class="image">
                    <img src="https://via.placeholder.com/100jpg" alt="candlestick logo">
                </span>
    </div>

    <!-- ===== Logo Text ===== -->
    <div class="text header-text">
      <span class="name">TradeJournal</span>
      <span class="creator">By RS</span>
    </div>
  </header>
</nav>

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

JQuery: Techniques for accessing the assigned font of an element

Can the assigned font of an element be retrieved using jQuery? For example, if there is this CSS: #element { font-family: blahblah,Arial; } In the above case, the Arial font will be assigned to #element. Is it possible to extract that information using ...

javascriptjquerycssfonts

String constant without an ending

My Description has a single quote character('). How can I make sure it doesn't break the code? <a href='javascript:select("<%= pageBean.replace(list.getColumn(0), "'", "'") %>", "<%= pageBean.replace(list.getColumn(1), ...

javajavascripthtmljsp

Make sure that when a user clicks on the back button in their web browser, it

Designing a file selection menu where users can choose a file and view it in a text area on a new page, allowing for text editing and saving with a click of a button. Users should be able to return to the file selection menu by simply clicking the browser ...

javascripthtmlasp.net

Utilizing Ajax for Multiplication

Is there a way to dynamically calculate and display the total amount by multiplying the unit price with the quantity entered in the text box as it changes? <div> <label id="" name="price" class="unitprice"><?php echo "Price: <label ...

javascripthtml

Using identical CSS for two separate layouts

Imagine having to work with an html page that cannot be altered in any way. The only tool at your disposal is CSS. The page is loaded and shown through an iframe from a different domain. This particular page serves as a payment gateway, displaying either ...

htmlcss

What is the method to retrieve an object by using a variable containing a string?

I am facing an issue with linking object names and anchor titles in my code. I want to store the title of an anchor element clicked by the user in a variable called sprite, which should then correspond to the name of an object. Here is the current version ...

javascripthtml

Customizing CSS in Blazor on mouseover with multiple displayed divs

@foreach (var item in RootOfJson.results) { <div class="card" @onmouseout="@OnMouseOut" @onmouseover="@OnMouseOver"> <img class="@Imgdisplay" <a href="/cdn-cgi/l/email-protection" class="__cf_email__" da ...

cssparametersblazorelementonmouseover

Scss - Only one for mobile devices

Just dipping my toes into scss and I've got a quick question. Here's the snippet of scss code I'm working with: .page { max-width: 1200px; position: relative; width: 100%; ul{ background-color: black; width ...

csssass

One div takes a backseat to the other div

I recently delved into learning Bootstrap, but I'm baffled as to why one div is appearing behind another. <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Fa ...

javascripthtmlcsssidebarbootstrap-5

I am looking to initiate the animation by triggering the keyframe upon clicking a button

Is there a way to create an animation triggered by a button click instead of loading the page? Each table data cell has its own class with a unique keyframe defining the style changes over time. @-webkit-keyframes fadeIn { from { opacity:0; ...

javascripthtmlcss

I am facing an issue with the asynchronous function as it is displaying an error message

**I am facing an issue with displaying categories. I have attempted to do this using async function, however the data is not showing up** <div class="form-group"> <label for="category">Category</label> <select id="categor ...

htmlangulartypescript

Bootstrap 4 - How to Properly Align Text within Lists

Recently, I started experimenting with Bootstrap 4 and encountered an issue with centering text in a list-group. In Bootstrap 3, the following CSS rule worked like a charm: .list-con { text-align:center; } However, in Bootstrap 4, the text-align prope ...

htmltwitter-bootstrapcssbootstrap-4

Sending data from an HTML textarea to a PHP variable without user input

After spending more than two days searching for a solution to this problem, I am now reaching out directly with my question. Although there have been some hints and partial answers, nothing has definitively resolved the issue I am facing, prompting me to m ...

javascriptphpjqueryhtmlcss

The JavaScript-rendered HTML button is unresponsive

I have a JavaScript function that controls the display of a popup window based on its visibility. The function used to work perfectly, with the close button effectively hiding the window when clicked. However, after making some changes to the code, the clo ...

javascripthtmlcssbutton

How can I make a checkbox with a label like the one shown in the w3schools example, but for a textbox instead?

After exploring the Input Groups examples on w3Schools Bootstrap, I noticed that there are Input Groups Labels that wrap around the input box. You can see an example of this here. Is it possible to achieve a similar layout for checkboxes as well? EDIT Th ...

htmlbootstrap-4

Guide to correctly inserting an image into a webpage using JavaScript

Currently, I am working on a tutorial for creating a dynamic webpage. The objective is to display the time and an image that changes based on the current hour. However, the method used by the instructor to insert the image is unfamiliar to me, and despit ...

javascripthtmlimage

What is the process for taking a website project running on localhost and converting it into an Android web application using HTML, CSS, and JavaScript

Looking for recommendations on how to create an Android web application using HTML, CSS, and JavaScript. Any suggestions? ...

javascriptandroidhtmlcssweb-applications

Updating the styles of React Native components using stylesheets

I've created a unique React component with the following structure: import { StyleSheet } from 'react-native'; import { Input, Item } from 'native-base'; import Icon from 'react-native-vector-icons/FontAwesome'; import { ...

javascriptcssreactjstypescriptreact-native

Using CSS GRID for creating layouts with customized grid-template-areas that include empty cells and automatic placement

Struggling with implementing the css grid layout module to showcase a 12-column, 3-row grid. The initial row should only contain two elements, positioned on each side of the grid with empty cells in between using ten periods. Subsequent rows should autom ...

htmlcsscss-grid

Joomla's erroneous media directory path leads to prolonged loading times

We seem to be facing an issue with a Joomla! 3.1 website at the following URL: There are two CSS files being included incorrectly: <link rel="stylesheet" href="//media/jui/css/bootstrap.min.css" type="text/css" /> <link rel="stylesheet" href="// ...

phpcssjoomla