Trouble Ensues as CSS Div Refuses to Center

I'm in the process of creating a practice website to improve my HTML and CSS skills, but I'm having trouble centering a specific div. I've attempted to use margin: 0 auto, but it doesn't seem to affect the positioning of the div at all. Below is the code snippet with the "work-sample" div that I'm trying to center:

HTML:

<div id="work-div">

    <div class="title black" id="work-title">My Work</div>

    <div class=""clear></div>

    <div id="work-sample-div">

        <div class="work-sample">       
            <a href="https://www.google.com/" class="work-title">Google.com</a>
            <div class="clear"></div>
            <a href="https://www.google.com/"> <img src="images/googlethumbnail.jpg"></img> </a>
            <p>Duis id pellentesque sapien. Praesent egestas ut eros eget convallis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam sit amet lacinia dui.</p>
        </div>

    </div>

</div>

CSS:

.black{
    color:black;
}

body {
    padding:0;
    margin:0;
    width:100%;
    font-family: Century Gothic, sans-serif;
}

.clear{
    clear:both;
}

.top-margin {
    margin-top:50px;
}

.title {
    font-size:4em;
    text-align:center;
}

#work-title {
    padding-top:20px;
}

.work-sample {
    font-size:.8em;
    border: solid 1px black;
    width:40%;
    padding: 20px;
    margin: 20px;
    border-radius:20px;
    float:left;
    min-width:400px;
}

.work-sample img {
    float:left;
    margin-top:10px;
    width:40%;
    border:1px black solid;
}

.work-sample p{
    overflow:hidden;
    padding-left:5px;
}

.work-sample a {
    color:black;
    text-decoration:none;
}

.work-title {
    font-size:3em;
}

#work-div {
    height:100vh;
}

You can also view a CodePen example of the current setup by following this link: http://codepen.io/anon/pen/bVROOK

Answer №1

Make sure to adjust the margin to 20px auto by removing the float: left property. Take a look at the updated code snippet below:

.work-sample {
    font-size:.8em;
    border: solid 1px black;
    width:40%;
    padding: 20px;
    /* auto left and right */
    margin: 20px auto;
    border-radius:20px;
    /* this line has to be removed; otherwise margins left/right are useless
    float:left;*/
    min-width:400px;
}

Answer №2

To implement this style, you can use the given CSS snippet:

#work-sample-div
{
    width: 100%;
    display: flex;
    justify-content: center;    
}

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

Utilizing graphics within the Atom text editor

Hey, I have a bit of a silly question. I can't seem to figure out why these images aren't showing up on my Atom editor. Can anyone help me with this? <body> <div class="top-container"> <img src="images/clou ...

What is the process for using jQuery to systematically alter the src attribute of all avatar images on Twitter.com?

Summary: I am learning JavaScript and jQuery, and wanted to write a script to replace "_normal.png" with ".png" for all "img.avatar" images on Twitter.com. I encountered an error which I will explain below. Background: Practice makes perfect, so I like to ...

Using JQuery with special characters in attributes

Within my jQuery script, I am required to dynamically translate certain content. As a part of this function, I have the following code: $('#password').attr('placeholder', 'Contrase&ntilde;a'); In this code snippet, I att ...

Issue with Custom CSS Class Not Displaying Correctly

I have implemented some unique CSS styles on a group of posts. You can view the site here. Upon inspecting the CSS classes of the posts, you will notice that the last two classes are .floats and .colThree. .colThree is being applied correctly with no issu ...

"Exploring the Functionality of Page Scrolling with

Utilizing Codeigniter / PHP along with this Bootstrap template. The template comes with a feature that allows for page scrolling on the homepage. I have a header.php template set up to display the main navigation across all pages. This is the code for th ...

Get the ability to overlay text onto an image by using jQuery for downloading

Currently, I am facing an issue with an online photo editor in my project. The problem is that I am unable to download the image after adding and editing text on it. The texts added are editable but the image cannot be downloaded after the changes. I nee ...

Python Selenium not registering button click

I'm working on scraping data from the website using Python with Selenium and BeautifulSoup. This is the code I have: driver = webdriver.Chrome('my file path') driver.get('https://www.ilcollege2career.com/#/') first_click = Web ...

Can HTML/CSS be used to specifically target handheld mobile devices?

I am looking to optimize my video display in HTML by only showing it on desktop browsers. The difference in bandwidth between desktop and mobile devices is affecting the performance of mobile browsers, so I want to target only desktop users. Is there a way ...

What to do when IE6/IE7 margins disappear after moving a relatively positioned floated div using jQuery's .hover()?

Sharing my code with you: http://jsbin.com/uhera3/edit Encountered an issue where the relatively positioned floated divs move to the left in IE7 when using jQuery's .hover() function. Any insights on how to resolve this problem? ...

Mysterious anomaly observed: Peculiar trajectory detected in canvas image during left

I have a fascinating HTML5 Canvas that showcases the movement of two identical objects to both the right and the left. Although the right side operates flawlessly, I've noticed that the left object leaves behind an intriguing trail with a hint of gree ...

Ways to determine the height of a responsive div's background image

I have a container with a background image. Inside this container, there are additional elements like my navigation bar. My goal is to make the container have the same height as the background image. I've attempted the following: .bg { ...

Step-by-step guide on repairing a countdown clock using JavaScript, HTML, and

I'm having issues with my JS on my website. I am new to this and currently in the process of setting up a website. I want to add a timer to show when the site will be active. It seems like there is an error somewhere in the JS code that I can't ...

Aligment issues in columns on Bootstrap 5

I currently have a layout using Bootstrap 5 with multiple rows and columns. My goal is to have the columns aligned within each row, but I am experiencing issues where some borders are not lining up correctly with the columns. .VI-border { border-t ...

HTML View of JSON Object Hierarchy

Hello, I have been trying various methods but am struggling to figure out how to display the following JSON object as a tree HTML view with ul li items using JavaScript. Can anyone help me with this? [ { "CategoriesModelId": 7, "Name": "Parent ...

Mastering the integration of Sass with NextJS

After successfully styling my NextJS app with SCSS modules, I encountered an unexpected error when I returned to work on it later: Syntax error: Invalid CSS after "...ound: variables": expected expression (e.g. 1px, bold), was ".$main-gradie ...

Is there a way to use jQuery to verify if an LI element contains a parent LI element?

Struggling with customizing the comments section of a WordPress theme? Utilizing jQuery for styling can be tricky, especially when dealing with nested UL elements like admin comments. The challenge lies in traversing the DOM structure to target specific el ...

How come JSOUP fails to read in UTF-8 format?

I've been struggling to parse utf-8 using jsoup. I've tried everything I know and even searched on Google. My goal is: String tmp_html_content ="Öç"; InputStream is = new ByteArrayInputStream(tmp_html_content.getBytes()); Documen ...

Is there a way to prevent a web page from automatically refreshing using JavaScript?

I would like my webpage to automatically refresh at regular intervals. However, if a user remains inactive for more than 5 minutes, I want the refreshing to stop. There is an example of this on http://codepen.io/tetonhiker/pen/gLeRmw. Currently, the page ...

The form is not being submitted when I click on the submit button because I have two buttons that trigger AJAX requests

I am facing an issue with a form where there is a submit button inside it, as well as another button within the form that has attributes type=button and onclick=somefunction(). The button with the onclick function works perfectly fine, but the other button ...

Ways to modify the input field value in my form based on the current page context

I am currently developing a website for a sports event organization company using Angular, HTML/CSS. The focus of this website is on the triathlon sport and it consists of several stages. On the home page, there are five image tags representing each stage ...