Tips on how to position a div tag in the center of a webpage

I want to center the div class icons within the image section2. I'm unsure if the margin-top:-17% is effectively placing the div on the image.

    <img style="padding-top:5%; width:100%;"src="img/image-section2.png">
        <div class="icons" style="position: relative; z-index: 2;margin-top:-17%;display:block;width:100%">
            <div style="float:left">
                <img style="width:25%"src="img/Project-icon.png">
                <h3 style="margin-left:-15%;width:200px;text-align:left;font-family:Raleway;font-weight:bold;font-size:15px;text-transform:uppercase;color:#FFFFFF;">complete Project</h3>
                <h1 style="margin-left:5%;width:200px;text-align:left;font-family:Arial;font-size:20px;text-transform:uppercase;color:#FFFFFF;">120</h1>
            </div>
            <div style="float:left">
                <img style="width:25%;"src="img/cup-of-coffee.png">
                <h3 style="margin-left:-15%;width:200px;text-align:left;font-family:Raleway;font-weight:bold;font-size:15px;text-transform:uppercase;color:#FFFFFF;">cups of coffee</h3>
                <h1 style="margin-left:5%;width:200px;text-align:left;font-family:Arial;font-size:20px;text-transform:uppercase;color:#FFFFFF;">570</h1>
            </div>
            <div style="float:left">
                <img style="width:25%;"src="img/award-icon.png">
                <h3 style="margin-left:-15%;width:200px;text-align:left;font-family:Raleway;font-weight:bold;font-size:15px;text-transform:uppercase;color:#FFFFFF;">Award Winners</h3>
                <h1 style="margin-left:5%;width:200px;text-align:left;font-family:Arial;font-size:20px;text-transform:uppercase;color:#FFFFFF;">682</h1>
            </div>
            <div style="float:left">
                <img style="width:25%;"src="img/customer.png">
                <h3 style="margin-left:-15%;width:200px;text-align:left;font-family:Raleway;font-weight:bold;font-size:15px;text-transform:uppercase;color:#FFFFFF;">happy customers</h3>
                <h1 style="margin-left:5%;width:200px;text-align:left;font-family:Arial;font-size:20px;text-transform:uppercase;color:#FFFFFF;">900</h1>
            </div>
        </div>
htmlcss

Answer №1

To avoid redundancy, use a single style tag instead of inline-styling each tag with multiple styles for all your classes/ids.

  • Instead of using a separate image tag, add a background image to the parent container.
  • Assign a class named "sub_container" to each sub-container and remove the float property while displaying them as table-cell with white-space: nowrap property.
  • Add equal padding top and bottom to the main container for a centered appearance of items on the page.

    • Below is a snippet (to be placed in a resizable window):

    div {
  color: black;
}

#container {
  background: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTomMW37agCBOu64_RK6Kn8kQyN9937Upm5XZXRPkwCIbeAwyNG");
  background-size: cover;
  padding-top:100px;
  padding-bottom:100px;
}
    ..(continue with the remaining code)

    Alternatively, here's another option (with a fixed height container):

    div {
  color: black;
}

#container {
  background: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTomMW37agCBOu64_RK6Kn8kQyN9937Upm5XZXRPkwCIbeAwyNG");
  background-size: cover;
  height:500px;
}
    ..(continue with the remaining code)

    Answer №2

    To center the class icon on the screen, apply margin: -17% auto;

    Best of luck

    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

    Create a personalized card featuring a captivating backdrop image

    Hey everyone, I’m a newbie in the world of web development and I recently put together something using bootstrap 5. If you want to check it out, here’s the link to my project on CodePen. I have a specific request though - instead of having icons displ ...

    htmlcssbootstrap-5

    Unable to call upon JavaScript code from an external file

    Just starting out with Spring and JavaScript! I've put together a JSP file https://i.sstatic.net/XemJ5.png In my first.js, you'll find the following method: function firstmethod() { window.alert("Enter a New Number"); return true; } H ...

    javascripthtmljsp

    What is the reason for the enhanced sharpness of fonts in Chrome compared to other browsers?

    I couldn't find an answer to this question through my searches on Google, so I apologize if it's already been asked. I've been working on a web project recently and one thing I noticed is that the fonts appear much bolder in Firefox or Safar ...

    htmlgoogle-chromefirefoxsafaritypography

    creating an interactive table with the help of the useState hook

    I'm new to JavaScipt and ReactJS, so I have a question that may seem obvious but I can't seem to figure it out. I am attempting to display my array in a table using useState, but currently I can only show the header. Additionally, if anyone know ...

    javascripthtmlreactjs

    Is there a way to remove a pseudo element in CSS using Internet Explorer

    I've been struggling to make some pseudo elements work in Internet Explorer, but it seems like I can't get it to function as intended. It's as if IE is ignoring the CSS rules that I have set up for these elements, and it's quite frustr ...

    cssinternet-explorerie-developer-tools

    Adjust the borderBottomColor of Material-UI TextField upon completion of input

    When working with MUI to create a form, I noticed that the default TextField bottom border is grey, turns blue when focused, and then back to grey when focus is lost. My goal is to prevent it from losing the blue color after filling in the field: https:// ...

    cssreactjsmaterial-uimaterial-design

    Determine the number of input files in HTML5 when there is a change

    I am working on a project that requires using the HTML5 File API to determine the number of files selected in an input file element and then displaying this count in another element. Here is the HTML code: <div class="form-row"> <label>Ma ...

    jqueryhtml

    Unable to retrieve HTML code from a webpage using its URL address

    Currently, I am trying to retrieve the HTML code of a specific webpage located at . My initial attempts using HttpClient were unsuccessful due to exceeding request processing time. It seems like this website may have anti-bot protection in place. I attempt ...

    c#htmlhttpparsinghttpclient

    Creating an overlay effect when hovering over an image

    Recently, I've been working on a gallery of photos that showcases different individuals. My goal is to have information about each person displayed when their respective photo is hovered over - including their name and role. .gallery { position: ...

    htmlcssoverlay

    Take the information entered in an HTML form, add it to a JSON object, and save it in a MYSQL

    I'm currently working on extracting data from a user registration form in HTML, converting it to JSON format, and then storing it in MySQL. Your assistance with this process would be greatly appreciated. HTML <form id="myForm" action="userInf ...

    phphtmlmysqlajaxjson

    What is the process of turning a picture from a menu file into a clickable link?

    I have created a menu with some images included, and I want them to be clickable links. However, currently only the text on top of the images acts as a link when hovered over. I would like the entire image to be clickable, not just the text. I believe I ...

    javascripthtmlcss

    Having trouble with React image rendering using webpack?

    Struggling to display an image in my React Web App, I encountered a broken image despite the correct file path appearing in the console log. We're utilizing url-loader and file-loader with webpack, importing the file path directly as necessary. Attemp ...

    htmlreactjsimagewebpackwebpack-dev-server

    Is there a way to prevent autoplay on swiper only on one slide based on a specific condition?

    One of the slides contains a form that opens when a button is clicked within that same slide. However, due to autoplay being enabled, the swiper continues to the next slide. I need to disable autoplay when the user clicks on the form opening button. The ...

    javascriptcssreactjsbootstrap-4swiper.js

    Is the z-index feature not functioning as anticipated?

    I'm currently working on a project involving a book that flips on click on both sides. The process involves checking the direction when a page is clicked and flipping it to the left if it's not to the right. Additionally, I adjust the z-index to ...

    javascripthtmlcss

    Integrate JavaScript code with HTML pages

    After creating a basic HTML structure that I am proud of, I encountered some challenges with getting the Javascript to function properly. I am new to working with Javascript and received some initial assistance, but unfortunately, it is no longer working. ...

    javascriptjqueryhtmljsonajax

    Upon submission of an HTML form, the user will be redirected to a specific page based on the value of the

    I am looking to create a form that redirects to a specific page based on the value of a radio button selected upon submission. The challenge here is that I also need to pass input values onto the URL. For instance: (1) Initially, start on the form page w ...

    phpjqueryhtmlforms

    Is CSS being dynamically generated by style?

    I have a website that I need help with: The footer on my site is currently black and I want to remove it To fix this issue, I have to adjust the height in this line of code <div style="position: relative; height: 126px;" id="footer-sidebar" class="fo ...

    phphtmlcsswordpress

    Break up the content in table cells with a new line character

    How can I get a string containing a new line character to wrap in a table cell? When I attempt to bind it, the text does not break at the new line character as expected. I have attached a screenshot for reference. In the console window, it displays correct ...

    css

    What is the best way to reverse an EJS forEach loop?

    Here is my ejs code to display images and names from my database. How can I reverse the array order to show the images and names in reversed order? <% posts.reverse().forEach(function(post){ %> <div class="col-md-3 col-sm-6"> ...

    javascripthtmlnode.jsloopsejs

    What is the best way to prevent the double tap event on radio buttons for mobile devices?

    My form with radio buttons works perfectly on the computer, but encounters issues on mobile devices. Users are required to double-tap to select a radio button, causing confusion. Is there a way to disable the double-tap requirement? I've looked at ot ...

    javascripthtmljquerycssforms