My CSS is giving me some trouble

Currently, I have 4 widgets with different sizes placed within a main div called #box. To center them, I reduced the width to about 60% and set margin left and right to auto. However, when I zoom out in my browser, the widget blocks move more to the left and do not stay centered.

<div id="Box"><!--Start Div Box-->
           
            <div id="TA_certificateOfExcellence580" class="Certificate Certificate-one">
<ul id="Lnnr78SGL0" class="TA_links 4fJwNUzU0uDT">
<li id="phnjh3wZ" class="Yi5zwOy1yHP">
<a target="_blank" href="https://www.tripadvisor.co.za">
            <img src="https://www.tripadvisor.co.za/img/cdsi/img2/awards/CoE2014_WidgetAsset-14348-2.png" alt="TripAdvisor" 
            class="widCOEImg" /></a>
</li>
</ul>
</div>
            
     
    <div id="TA_certificateOfExcellence654" class="Certificate Certificate-two">
<ul id="FVuBAHp" class="TA_links CPqPZ6">
<li id="dYmcZAj7eGOi" class="FKHiRxci">
<a target="_blank" href="https://www.tripadvisor.co.za">
            <img src="https://www.tripadvisor.co.za/img/cdsi/img2/awards/CoE2014_WidgetAsset-14348-2.png" alt="TripAdvisor"
             class="widCOEImg" /></a>
</li>
</ul>
</div>  
            
    
    
    <div id="TA_certificateOfExcellence588" class="Certificate Certificate-three">
<ul id="E4oUIOq5y" class="TA_links JWgIqGH4nEMg">
<li id="R3Oc1SU8Y" class="bXEYi56LVvek">
<a target="_blank" href="https://www.tripadvisor.co.za">
            <img src="https://www.tripadvisor.co.za/img/cdsi/img2/awards/CoE2014_WidgetAsset-14348-2.png" alt="TripAdvisor"
             class="widCOEImg" /></a>
</li>
</ul>
</div>
            
    
    
    <div id="TA_certificateOfExcellence396" class="Certificate Certificate-four-last">
<ul id="ENh9NKezEOIt" class="TA_links j9dirUfR">
<li id="LKMj2Zk" class="Z16i8koQq">
<a target="_blank" href="https://www.tripadvisor.co.za/Attraction_Review-g312578-d2284717-Reviews-Felleng_Day_Tours-Johannesburg_Greater_Johannesburg_Gauteng.html">
            <img src="https://www.tripadvisor.co.za/img/cdsi/img2/awards/CoE2015_WidgetAsset-14348-2.png" alt="TripAdvisor"
             class="widCOEImg" /></a>
</li>
</ul>
</div>
            
    
    </div><!--End Div Box-->

#Box
{
background-color:#CCCCCC;
width:60%;
margin-left:auto;
margin-right:auto;

}

View Image Before Zooming Browser Out

View Image After Zooming Out

htmlcsswidthmarginresponsive

Answer №1

Your images are not properly aligned within the center container. To fix this, you should ensure that both the container and the inside elements are centered.

Consider using the float: left property for each image element with a specific width. Alternatively, utilize inline-block elements for easier centering, especially since your images are naturally inline. However, it seems like you have not implemented this approach yet.

You can view an example of a possible solution in this fiddle: https://jsfiddle.net/abvt8ekj/

Here is the snippet:

.container {
  background-color: #ee55cc;
}

#Box{
  background-color:#CCCCCC;
  width:60%;
  margin-left:auto;
  margin-right:auto;
}

#Box:after {
  display: block;
  content: "";
  clear: both;
}

.Certificate {
  width: 25%;
  float: left;
  overflow: hidden;
}

.Certificate ul,
.Certificate li {
  margin: 0;
  padding: 0;
}
<div class="container">
<div id="Box"><!--Start Div Box-->

  <div id="TA_certificateOfExcellence580" class="Certificate Certificate-one">
    <ul id="Lnnr78SGL0" class="TA_links 4fJwNUzU0uDT">
      <li id="phnjh3wZ" class="Yi5zwOy1yHP">
        <a target="_blank" href="https://www.tripadvisor.co.za">
          <img src="https://www.tripadvisor.co.za/img/cdsi/img2/awards/CoE2014_WidgetAsset-14348-2.png" alt="TripAdvisor" 
            class="widCOEImg" />
        </a>
      </li>
    </ul>
  </div>

  <div id="TA_certificateOfExcellence654" class="Certificate Certificate-two">
    <ul id="FVuBAHp" class="TA_links CPqPZ6">
      <li id="dYmcZAj7eGOi" class="FKHiRxci">
        <a target="_blank" href="https://www.tripadvisor.co.za">
          <img src="https://www.tripadvisor.co.za/img/cdsi/img2/awards/CoE2014_WidgetAsset-14348-2.png" alt="TripAdvisor"
            class="widCOEImg" />
        </a>
      </li>
    </ul>
  </div>

  <!-- Add more similar certificate divs here -->

</div><!--End Div Box-->
</div>

Answer №2

To avoid setting a specific width for your main container, you have the option to utilize the text-align property:

text-align:center;

Check out this demonstration on Fiddle: https://jsfiddle.net/exampleuser/abc123/

Answer №3

To center the div called #box on the page, try placing another div inside #box1 and aligning that second div in the center.

Here is an example:

    <!DOCTYPE html>
<html>
    <head>
        <style>
        #box1{
        background-color:black;

        }

        #box2{
        margin:auto;
        background-color:green;
        width:50px;
        height:50px;
        display:block;
        align:center;
        }
        </style>
    </head>
        <body>

        <div id = "box1">
            <div id = "box2"></div>
        </div>

        </body>
</html>

This method worked for me, and even when zooming in or out, the div remains centered. Simply place your images within the second div. Hope this helps!

Answer №4

If you want to keep your content centered at all times, consider using flexbox. And remember, if you don't want the list items to have a default padding of 40px, just add padding-left:0px; to the ul element.

#Box{
  display:flex;
  justify-content:center;
}
<div id="Box"><!--Start Div Box-->
           
            <div id="TA_certificateOfExcellence580" class="Certificate Certificate-one">
<ul id="Lnnr78SGL0" class="TA_links 4fJwNUzU0uDT">
<li id="phnjh3wZ" class="Yi5zwOy1yHP">
<a target="_blank" href="https://www.tripadvisor.co.za">
            <img src="https://www.tripadvisor.co.za/img/cdsi/img2/awards/CoE2014_WidgetAsset-14348-2.png" alt="TripAdvisor" 
            class="widCOEImg" /></a>
</li>
</ul>
</div>
    
    <div id="TA_certificateOfExcellence654" class="Certificate Certificate-two">
<ul id="FVuBAHp" class="TA_links CPqPZ6">
<li id="dYmcZAj7eGOi" class="FKHiRxci">
<a target="_blank" href="https://www.tripadvisor.co.za">
            <img src="https://www.tripadvisor.co.za/img/cdsi/img2/awards/CoE2014_WidgetAsset-14348-2.png" alt="TripAdvisor"
             class="widCOEImg" /></a>
</li>
</ul>
</div>  
    
    <div id="TA_certificateOfExcellence588" class="Certificate Certificate-three">
<ul id="E4oUIOq5y" class="TA_links JWgIqGH4nEMg">
<li id="R3Oc1SU8Y" class="bXEYi56LVvek">
<a target="_blank" href="https://www.tripadvisor.co.za">
            <img src="https://www.tripadvisor.co.za/img/cdsi/img2/awards/CoE2014_WidgetAsset-14348-2.png" alt="TripAdvisor"
             class="widCOEImg" /></a>
</li>
</ul>
</div>  

    <div id="TA_certificateOfExcellence396" class="Certificate Certificate-four-last">
<ul id="ENh9NKezEOIt" class="TA_links j9dirUfR">
<li id="LKMj2Zk" class="Z16i8koQq">
<a target="_blank" href="https://www.tripadvisor.co.za/Attraction_Review-g312578-d2284717-Reviews-Felleng_Day_Tours-Johannesburg_Greater_Johannesburg_Gauteng.html">
            <img src="https://www.tripadvisor.co.za/img/cdsi/img2/awards/CoE2015_WidgetAsset-14348-2.png" alt="TripAdvisor"
             class="widCOEImg" /></a>
</li>
</ul>
</div>  

    </div><!--End Div Box-->

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

What is the best way to place a button within a line of text

I am trying to achieve a layout similar to this: -------------------button------------------ I can add text inside the line, but it doesn't look good when I add a button. Any suggestions on how I can improve this? ...

htmlcss

Submitting HTML form data to a Java class via JavaScript, following validation with JavaScript within a JSP file

I am struggling with posting data obtained from an html form created in a jsp file using javascript and sending it to a java class after validating the form data. I was exploring alternatives to Ajax since I am not well-versed with those tools, but if you ...

javascriptajaxhtmljsp

How come my div is taking on the height of something that isn't its direct ancestor?

I am in the process of creating a website that features a consistent design element of an inset border surrounding a block of content within a <div>. This inset border is achieved using LESS/CSS, and is contained within a separate <div class="inse ...

htmlcss

Error 404: Troubleshooting an Azure Issue with Custom TrueType Font in .NET MVC 5

I am encountering an issue that has been previously addressed. Despite implementing the suggested solutions, the problem persists. In an effort to enhance my project, I downloaded two custom ttf fonts called Monterey and Bakery. Both fonts have been succ ...

cssasp.net-mvcvisual-studioazurefonts

What is the best method for showing the name of the card?

I have developed a game using Angular that displays images of cards, but I am facing an issue in showing their names on the screen. At times, it displays the same name for all the cards or even incorrect names. In my TypeScript class 'Paquet', I ...

htmlangulartypescript

Is there a way to specifically dictate the order in which flexbox items expand or contract?

I am facing an issue with my flex container setup involving three children elements. I have specified both minimum and maximum widths for each child, but I want them to grow or shrink in a specific order as the window width changes. Ideally, Item1 should s ...

cssreactjsflexbox

When performing web scraping with Puppeteer, employing a single selector to target various types of data

As a budding web developer, I have recently delved into coding. My current knowledge is limited to HTML, CSS, JS, and NODE. Currently, I am working on a project involving page scraping and utilizing puppeteer. CHALLENGE - In scenarios like the o ...

javascripthtmlnode.jsweb-scrapingpuppeteer

Placing text alongside an image at the top of the page

Here's the HTML code generated by JSF: <div align="center"> <img src="images/background_image.jpg" height="200px" width="30%" style="vertical-align: top"/> <span style=""> Welcome abc, <input type= ...

htmlcsstext-alignment

Firefox only loads images and jquery after a refresh of the page

Upon initially accessing my site after clearing the cache (a jsp page from a spring app), I noticed that the images and styles were not being applied. However, upon refreshing the page (ctrl-r), everything loaded perfectly. In Firefox's console outpu ...

javascriptjquerycssjsp

challenges in populating arrays with Javascript

After performing certain actions, I have generated an array of data. Upon submitting the page, the control will redirect to the second page where I need to populate the array data into tables using Javascript only. The problems I am currently facing are: ...

javajavascripthtml

Is there a way to showcase the output of the <div id="height"> on the height of the rectangle?

My Current Project Currently, I am in the process of developing a picture framing calculator using a combination of HTML, CSS, and JavaScript. Functionality of the Calculator For this calculator, users will input values such as: Frame Width (wf): 16 ...

javascripthtmljquerycss

Floating color problem

Do you know why the social icons turn black when hovered over? Could it be related to the navbar buttons? Is there a way to change the hover color to blue or red only? Link to code snippet <body> <nav class="navbar navbar-default navbar-fixed-t ...

htmlcsstwitter-bootstrap-3

Learn the method of centering flexbox vertically by using the flex-wrap property with the value

enter image description here I am currently working on a to-do list project. Whenever I add a folder, it appears vertically aligned. (click the /Bottom bar/ button -> it will display a folder in the /Homecomponent/) Each new folder I add goes further ...

cssreactjsflexbox

How to center a div vertically in a window

I have a CSS layout that positions a div both horizontally and vertically relative to the window. It works well, but when I scroll down the page, the div stays centered as if the page hadn't moved. width:600px; height:300px; position:absolute; left:5 ...

javascriptcss

How can I attach a click event to the left border of a div using jQuery?

I am wondering about a div element <div id="preview"> </div> Can anyone suggest a method to attach a click event specifically to the left border of this div? Your help is greatly appreciated. ...

javascriptjqueryhtmlclick

The mobile-responsive dropdown navigation bar functions well on browsers with small widths, but does not work properly on my phone

I am experiencing an issue with the mobile responsive dropdown navigation bar on my website. It works perfectly fine on a small width browser, but when I try to open it on my phone, nothing happens. This is puzzling me as I am new to making websites respon ...

javascriptjqueryhtmlcss

spark of unique substance

Having trouble with cycle2 as all images are briefly displayed when the page loads. I tried the recommended solution http://jquery.malsup.com/cycle/faq.html but it didn't stop the flashing, indicating a different issue: The suggested fix for Cycle is ...

javascriptjqueryhtmlcssjquery-cycle2

Using Google Fonts in a Typescript React application with JSS: A step-by-step guide

How can I add Google fonts to my JSS for use in styling? const styles = ({palette, typography}: Theme) => createStyles({ time: { flexBasis: '10%', flexShrink: 0, fontSize: typography.pxToRem(20) }, guestname: ...

cssreactjstypescriptjss

Need help with setting up active buttons for dynamically added elements in jQuery?

I came across this example on adding a button dynamically using jquery and I have a question regarding it. How can I attach jquery functions to the newly created buttons after clicking on the "insert after" button multiple times? For instance, if I click ...

javascripthtmljquerydom-events

When using Material UI GridTile, the actionIcon will not be shown if there is no title present

In my React application, I am utilizing Material-UI GridList to showcase some images. I am interested in adding an IconButton on top of the image in my GridTile component. Currently, I can achieve this by providing the button to the actionIcon prop. Howeve ...

cssreactjsoverlaymaterial-ui