Place the social media division at the center of the webpage

I've been struggling to center the social media icons on my website, but haven't had any luck. Here's the code I've been working with:

https://jsfiddle.net/2ahgL130/1/

CSS:

.table1{
    margin:0;
    padding:0;
    min-width:100%
}

.table2{
  font-family:'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:1em;
  line-height:1.5;
  max-width:600px;
  padding:0 20px 0 20px;
}

.table3{
   padding:20px;
}

.table4{
 padding-bottom:20px;
 padding-top: 0px;
 align-items: center;
}
.table5{
padding-bottom:20px;
}

Can anyone help me correct my code so that the elements appear centered on the page?

htmlcss

Answer №1

To optimize your code, it is recommended to update it entirely and incorporate the snippet below using flexbox.

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}


.container {
  width: 100%;
  height: 100%;
  background-color: #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div class="container">
  <a href="" target="_blank" data-saferedirecturl="">
    <img src="https://dummyimage.com/32x32/000/fff" width="32" height="32">
  </a>
  <a href="" target="_blank" data-saferedirecturl="">
    <img src="https://dummyimage.com/32x32/000/fff" alt="" width="32" height="32">
  </a>
</div>

Answer №2

Feel free to utilize the following code snippet:

body {
            margin: 0;
            padding: 0;
        }
        .table1 {
            margin: 0;
            padding: 0;
            min-width: 100%
        }
        .table2 {
            font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
            font-size: 1em;
            line-height: 1.5;
            max-width: 600px;
            padding: 0 20px 0 20px;
            margin: 0 auto;
        }
        .table3 {
            padding: 20px;
        }
        .table4 {
            padding-bottom: 20px;
            padding-top: 0px;
            align-items: center;
        }
        .table5 {
            padding-bottom: 20px;
        }
        table {
            border-collapse: collapse;
            margin: 0 auto;
        }
    <div>
        <div lang="en" dir="ltr" class="table1">
            <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="table2">
                <tbody>
                    <tr>
                        <td class="table3">
                            <table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0">
                                <tbody>
                                    <tr>
                                        <td class="table4">
                                            <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="210">
                                                <tbody>
                                                    <tr style="text-align: center;">
                                                        <td height="32" width="42">
                                                            <a href="" target="_blank" data-saferedirecturl="">
                                                                <img src="https://www.w3schools.com/images/picture.jpg" width="32" height="32">
                                                            </a>
                                                        </td>
                                                        <td height="32" width="42">
                                                            <a href="" target="_blank" data-saferedirecturl="">
                                                                <img src="https://www.w3schools.com/images/picture.jpg" width="32" height="32">
                                                            </a>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="table5">
                                            <a href="" target="_blank" data-saferedirecturl="">
                                                <img src="" alt="" width="136" height="50">
                                            </a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

Answer №3

Insert a Table with center alignment

<div>
    <div lang="en"  class="table1">
        <table align="center" role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="table2">
            <tbody>

                <tr>

                    <td class="table3">
                        <table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0">
                            <tbody>
                                <tr>
                                    <td class="table4">

                                        <table align="center" role="presentation" border="0" cellpadding="0" cellspacing="0" width="210">
                                            <tbody>
                                                <tr>
                                                    <td height="32" width="42">
                                                        <a href="" target="_blank" data-saferedirecturl="">
                                                            <img src="" width="32" height="32" >
                                                        </a>
                                                    </td>
                                                    <td height="32" width="42">
                                                        <a href="" target="_blank" data-saferedirecturl="">
                                                            <img src="" width="32" height="32" >
                                                        </a>
                                                    </td>

                                                </tr>
                                            </tbody>
                                        </table>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="table5" style="text-align:center">
                                        <a href="" target="_blank" data-saferedirecturl="">
                                            <img src="" alt="" width="136" height="50">
                                        </a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

https://jsfiddle.net/lalji1051/f2gs7erq/5/

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

Eliminate the excess padding from the Material UI textbox

I've been struggling to eliminate the padding from a textbox, but I'm facing an issue with Material UI. Even after setting padding to 0 for all classes, the padding persists. Could someone provide guidance on how to successfully remove this pad ...

javascripthtmlcssreactjsmaterial-ui

Is Angular File API Support Compatible with HTML5?

When checking for HTML5 File API browser support in my code: private hasHtml5FileApiSupport; constructor(@Optional() @Inject(DOCUMENT) document: Document) { const w = document.defaultView; this.hasHtml5FileApiSupport = w.File && w.FileReader & ...

javascriptangularhtmltypescripthtml5-filesystem

What is the process for aligning rows with the selected option from the drop-down menu

Alright, so here's the scenario: I have created a table along with two drop-down filters. The first filter is for selecting the Year, and it offers options like "All", "2023", "2022", and "2021". When I pick a specific year, let's say "2022", onl ...

javascripthtmlcss

How come I can click on both radio buttons simultaneously?

How come I can select both radio buttons simultaneously? <form #form="ngForm"> {{ poll.counter1 }} votes <input type="radio" id="{{ poll.choice1 }}" value="{{ poll.choice1 }}" (click)="onChoice1(form)">{{ poll.choice1 }} <br> ...

htmlangular

How can PHP be used to replace the div html() function?

I am working with multiple product elements that are dynamically assigned their class and ID using PHP: $product1["codename"] = "product-1"; $product1["short"] = "Great Product 1"; $product2["codename"] = "product-2"; $product2["short"] = "Great Product ...

phpjqueryhtml

What is the best way to adjust the size of carousel images within a box element?

How can I ensure that carousel pictures are displayed clearly within the box without overflowing? The code I tried resulted in the pictures overflowing from the box and not being visible clearly. How can I resolve this issue? .container { width: 1490px; ...

javascripthtmlcssbootstrap-4

Tips for resizing images to fit within a TD cell in an HTML table

Currently, I have an issue with the image display within a TD element. Despite setting a specific width for the TD, the image appears to be wider than intended. Could you offer a solution to this problem? ...

htmlcss

Is there a way to integrate an After Effects animation onto my website?

Being a beginner in the world of coding, I am determined to learn by building my own personal website. However, I have encountered a challenge with after effects. I have designed an animation for the welcome screen of my website using my logo and a welcome ...

jqueryhtmlcssafter-effects

Update the Bootstrap CSS styling of a button element following a user's click action

I am currently working with Bootstrap and facing an issue where I am trying to change the button color, but after clicking it and moving the mouse away, the color reverts back to blue. Here is the color I initially selected: https://i.sstatic.net/DCMq5.p ...

htmlcssbootstrap-4

What is the CSS selector used to target elements that are not contained within another selector?

There are numerous nested divs within my code: <div> <div> <div>Apple</div> <div> <div>Banana</div> <div>Grape</div> </div> </div> <div>Craisin</div&g ...

css

Capture input before onChange and ideally only accept numerical values

Preparing for inexperienced users, I have a table of input fields. My goal is to enhance user experience and make the form as user-friendly as possible. I have developed code that highlights the table row immediately after an input field has changed. Howe ...

javascriptjqueryhtmlforms

Best practice for encapsulating property expressions in Angular templates

Repeating expression In my Angular 6 component template, I have the a && (b || c) expression repeated 3 times. I am looking for a way to abstract it instead of duplicating the code. parent.component.html <component [prop1]="1" [prop2]="a ...

htmlangulartypescript

Methods for showing Internet Explorer not supported in Angular without needing to import polyfills

Due to the deprecation of IE in Angular 12, I need to inform users to switch to a supported browser by displaying a static warning on my page. To achieve this, I have implemented a simple snippet in the index.html file that appends a CSS class to the body ...

javascripthtmlangularinternet-explorer

I'm having trouble getting the float left to work properly in my HTML/CSS code

Currently, I am diving into the world of HTML / CSS on my own. After following some tutorials, I have taken the leap to work on my very first project. My goal is to layout three images and three text elements on a single page using CSS. The desired struct ...

htmlcss

Showing a property only as you scroll through the page

Seeking assistance on creating a scrolling effect for a box shadow property using HTML, CSS, and JS. The goal is to have the shadow appear with a subtle transition while scrolling and then disappear when scrolling stops. Here's the code I've be ...

javascripthtmlcss

Unusual Actions from the Text Field

Please take a look at this link <div id="textarea_wrapper"> <textarea>How and where is my width derived from?</textarea> </div> #textarea_wrapper{ height: 250px; border:thick solid green; } textarea{ background-color: #930; ...

csshtml

Tips for incorporating a download button into a video player using Plyr JS

I'm using Plyr JS and I am trying to add a download option for each video. Here is what I've done so far to make the download option work: Even though I have included: controlsList="nodownload" <video controls crossorigin playsinline contro ...

javascripthtmlhtml5-videoplyr.js

What steps can I take to set a default value for a select tag if the option value is not a specific value?

<select name="corequisite"> <option value="" selected="selected">No Corequisite</option>'; $res = mysqli_query("SELECT * FROM course"); while($row = mysqli_fetch_array($res)){ echo'<option value="'.$row['Code&ap ...

phphtmlmysql

When the user clicks, the template data should be displayed on the current page

I need help with rendering data from a template on the same HTML page. I want to hide the data when the back button is clicked and show it when the view button is clicked. Here is my code: <h2>Saved Deals</h2> <p>This includes deals wh ...

javascripthtmlmeteormeteor-helper

Setting up Node.js

I'm currently in the process of configuring my Node.js to execute my HTML code. I have Bootstrap and Express Js set up as well. However, when I launch Node.js, it doesn't seem to be loading the CSS properly. Can someone provide insight into what ...

htmlnode.jstwitter-bootstrapexpress