Achieving vertical center alignment of an element using CSS

I have been attempting to vertically center the content within my div.

Here is the HTML code:

<div id="header">
        <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1" id="logo-img-div"><img id="logo-img" src="logo.png"></div>
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" id="logo-text">Text</div>
    </div>

And here is the CSS style:

@media only screen and (min-width: 768px) {
        .col-sm-1 {width: 8.33%; float: left;}
        .col-sm-2 {width: 16.66%; float: left;}
        .col-sm-3 {width: 25%; float: left;}
        .col-sm-4 {width: 33.33%; float: left;}
        .col-sm-5 {width: 41.66%; float: left;}
        .col-sm-6 {width: 50%; float: left;}
        .col-sm-7 {width: 58.33%; float: left;}
        .col-sm-8 {width: 66.66%; float: left;}
        .col-sm-9 {width: 75%; float: left;}
        .col-sm-10 {width: 83.33%; float: left;}
        .col-sm-11 {width: 91.66%; float: left;}
        .col-sm-12 {width: 100%; float: left;}
}

* {
    color: #2c2c2c;
    height: 100%;
    width: 100%;
    margin: 0 !important;
    font-family: 'Raleway';
}

#header {
    height: 10%;
    background-color: #2c2c2c;
    color: #c4c3c3;
    font-family: 'title';   
}

#logo-img {
    height: 80%;
    width: auto;

}

#logo-img-div {

}


#logo-text {
    color: #c4c3c3;

}

I am looking to horizontally center the content of the logo-img-div and logo-text, while still keeping these two divs on the left side of the header content. I have tried various solutions found online but none have worked for me.

htmlcss

Answer №1

By utilizing the wildcard selector *, you are applying properties to all selectors. Having a margin of 0 means that aligning your div elements is not possible.

Typically, you would use margin-left or margin-right and adjust by a certain number of pixels or em's...

Answer №2

To achieve alignment without margins for (*) elements, consider setting margins only for left and right sides. This ensures that the distance between elements remains consistent:

* {
  color: #2c2c2c;
  height: 100%;
  width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
  font-family: 'Raleway';
}

For vertical centering of a div with id 'header', try this approach:

#header{
  position: relative;
  top: 40%;
  height:10%
  background-color: #2c2c2c;
  color: #c4c3c3;
  font-family: 'title'; 
}

Calculate element heights in % to accurately center elements by subtracting from a reference percentage like 50%. For instance, if an element's height is set to 10%, adjusting the positioning to 40% effectively centers it.

Answer №3

To achieve alignment of child items, utilize flexbox. It is advisable not to assign height and width values of 100% to all elements.

@media only screen and (min-width: 768px) {
  .col-sm-1 {width: 8.33%; float: left;}
  .col-sm-2 {width: 16.66%; float: left;}
  .col-sm-3 {width: 25%; float: left;}
  .col-sm-4 {width: 33.33%; float: left;}
  .col-sm-5 {width: 41.66%; float: left;}
  .col-sm-6 {width: 50%; float: left;}
  .col-sm-7 {width: 58.33%; float: left;}
  .col-sm-8 {width: 66.66%; float: left;}
  .col-sm-9 {width: 75%; float: left;}
  .col-sm-10 {width: 83.33%; float: left;}
  .col-sm-11 {width: 91.66%; float: left;}
  .col-sm-12 {width: 100%; float: left;}
}

* {
  color: #2c2c2c;
  margin: 0;
  font-family: 'Raleway';
}

html, body {
  height: 100%;
}

#header {
  height: 10%;
  background-color: #2c2c2c;
  color: #c4c3c3;
  font-family: 'title';
  display: flex;
  align-items: center;
}

#logo-img {
  height: 80%;
  width: auto;
}

#logo-text {
  color: white;
}
<div id="header">
  <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1" id="logo-img-div"><img id="logo-img" src="logo.png"></div>
  <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" id="logo-text">Text</div>
</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

Ensure that all values are in a single row on the webpage

I'm currently working on a web application that requires a label, textbox, and button to be aligned in one row. However, they are displaying in separate rows. Below is the code I have been using: <div class="form-group row"> <label clas ...

html

Elevate a division within its container

Is there a way to make a smaller div positioned at the top when it's placed next to a larger one in the same container? I'm looking for a solution that doesn't involve using position-relative and manually adjusting the placement. Take a loo ...

htmlcss

Tips for creating two divs next to each other with inline-block?

Is there a way to align the divs side by side and have the 'contentwrapper' div responsive to the resizing of the browser window? HTML <div id="maincontainer"> <div id="leftcolumn">&nbsp;</div> <div id="contentwrapper ...

htmlcss

What are some ways to implement CSS2 specifications in case CSS3 support is not detected by the browser?

I am currently working on a website using HTML5 and CSS3, but I also need it to be compatible with older browsers. Although I am using the Modernizr library, it does not allow me to replace certain CSS3 elements with CSS2 alternatives. For example, I have ...

htmlcss

How can I position text next to an input within a <td> element in a vertical arrangement?

Below is the HTML code: <fieldset><legend>Callout Report</legend> <table> <tr><td>Start Time</td><td> <input type="text" id="startTimeUI" autocomplete="off" /> </td></tr> <tr><td& ...

htmlcsshtml-tablemultiple-columns

What is the best way to extract a URL parameter from the parent page and pass it to an iframe using JavaScript?

Currently, I have embedded a form within an iframe on a specific landing page. Visitors arriving at this landing page through an affiliate link will have a parameter added to the URL (http:thelandingpage.com?c3=1). After they submit the form within the ifr ...

javascripthtmliframe

The anchor tag with an id attribute only functions properly when I select "open in a new tab."

Can anyone help me with a weird issue I'm facing? I have a div containing an anchor tag with an id, but when I click on the anchor tag, it doesn't open the link. Strangely, if I right-click and open it in a new tab, it works fine. Any idea why th ...

htmlanchor

What is the method for identifying the name of a CSS Variable currently in use?

Consider this code snippet: /* css */ :root { --text-color: #666666; } input { color: var(--text-color); } In Javascript, how can I determine the name of the CSS custom property (variable) being utilized? // javascript console.log(document.querySel ...

javascriptcssvariables

Struggling to create responsive embedded videos?

https://i.sstatic.net/R0GUn.jpgI have successfully created a responsive video, but there seems to be an issue with the width to height ratio when the browser is fully stretched. The iframe appears narrow and tall in this situation. However, when the browse ...

htmlcss

What method does ajax utilize to retrieve data from the golang code?

I have developed a golang API to manage the data saved and retrieved from a form. Saving the data entered in the HTML form works fine, as it successfully saves the data in a MongoDB database. However, when retrieving the data based on the email entered in ...

jqueryhtmlajaxgo

How to modify the font color of weekend dates on jquery datepicker

Can I adjust the font color of dates that land on weekends in a jQuery calendar? I attempted to utilize the class ui-datepicker-week-end but it only alters the font color for Sunday and Saturday. My aim is to also modify the color of days that fall on Su ...

jqueryhtmlcssjquery-uijquery-ui-datepicker

How to create list item bullets with a star icon using reactstrap/react?

As a machine learning professional looking to enhance my frontend skills, I am curious about how to create list item bullets using a custom star bullet image. Could anyone please share a complete HTML/CSS example with me? Thank you in advance! ...

htmlcssreactjsfrontendreactstrap

What is the process of assigning data, in JSON format, from an HTML form to a variable?

I have the coding below in my abc.html file, which converts form data to JSON format: <body> <form enctype='application/json' method="POST" name="myForm"> <p><label>Company:</label> <input name=& ...

javascripthtmljson

Having trouble with Bootstrap form-inline stacking issue, any tips on how to stop them from stacking?

I've created a simple test navbar with a search input box and search button using the Bootstrap class form-inline. However, the search button is appearing below the search input, even though there is enough space available. You can view the codepen he ...

htmlcssbootstrap-4navbarbootstrap-5

What is the best method for resizing an SVG according to the size of my website's window?

I am attempting to implement a scalable settings icon SVG file that adjusts based on the window width. My approach involved creating a JavaScript function that alters the element's dimensions according to the window size, but unfortunately, this metho ...

javascripthtml

"Add a touch of magic to your webpage with text effects that appear

I am looking to create a glowing text effect, and I stumbled upon this resource. http://jsfiddle.net/karim79/G3J6V/1/ However, the client prefers the text effect to appear after the page loads, rather than on hover. Unfortunately, I do not have experien ...

jqueryhtmlcss

Create an animated circle in canvas that smoothly descends over a set duration

I am looking to animate a circle using the ctx.arc(10, 10, 15, 0, Math.PI*2, true); method and have it flow downwards without losing its trail. The image below illustrates this clearly: As shown in the image, the circle is continuously moving downwards o ...

javascripthtmlanimationcanvashtml5-canvas

Struggling to populate a dropdown list with HTML, PHP, and MySQL

Here is the code snippet for creating a payment form: Everything seems to be working fine, but there is an issue with the supplier-ID dropdown. The dropdown is being created but it is not fetching data from the mysql table and no errors are being display ...

phphtmlmysqlcss

The CSS is not displaying correctly on Safari and Chrome browsers in Mac OS

I'm having trouble with CSS not loading properly on Apple devices for a website I made. Despite maintaining all media query statements and style sheets separately, the display is not correct in MAC OS safari and chrome. However, everything looks fine ...

javascriptjqueryhtmlcsssafari

Adjust the left margin to be flexible while keeping the right margin fixed at 0 to resolve the spacing

To create a responsive design that adjusts based on screen size, I initially set the content width to 500px with a margin of 0 auto. This meant that for a 700px screen, the content would remain at 500px with left and right margins of 100px each. Similarl ...

javascriptjqueryhtmlcss