organize multiple blocks in the middle of the page (html)

This code is unique and belongs to me.

<html>

<head><title>HOME||~All About EDM~</title>


</head>

<body >
<center><img src="edm1.jpg" alt="edm" width="950" height="250"></body></center>

<center>
<style type="text/css" >
ul
{
list-style-type:none;

margin:0;
padding:0;
overflow:hidden;
}
li
{
position:relative;
left:18%;
float:left;
}
a:link,a:visited
{


display:block;
width:200px;
font-weight:bold;
color:#272525;
background-color:#DF01A5;
text-align:center;
padding:10px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#272525;
font-weight:bold;
color:#DF01A5;
text-align:center;
}

</style>
</center>

<center>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="genres.html">Genres</a></li>
<li><a href="photos.html">Photos</a></li>
<li><a href="info.html">Info</a></li>

</center>

</body>
</html>

I am struggling to center 5 blocks in a row, instead they align as columns. I have tried multiple methods but can't seem to achieve the desired layout. Any suggestions?

htmlcssblock

Answer №1

Have you checked out this coding example

The regular layout looks like this: 

<head>
<title>HOME||~All About EDM~</title>

<style type="text/css"></style>
</head>

<body>
<img src="edm1.jpg" alt="edm" width="950" height="250">


<ul>
<li><a href="home.html">Home</a></li>
<li><a href="genres.html">Genres</a></li>
<li><a href="photos.html">Photos</a></li>
<li><a href="info.html">Info</a></li>
</ul>


</body>
</html>

Don't forget to include a doctype declaration as well.

Answer №2

The use of the center tag is not recommended in HTML5. It is better to utilize CSS for centering by using text-align: center;.

<div class = 'imgClass'>
    <img src="edm1.jpg" alt="edm" width="950" height="250">
</div>

...

.imgClass {
    text-align: center;
}

Answer №3

Centering images using text-align is not the best practice (refer to this post on center image alignment)

To properly center an image, it is recommended to either specify a specific width for the container div or set its display type to "block" (which you have done), and then set margin-left and margin-right to "auto", as explained in the referenced answer.

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

Tips to store Google fonts in the assets directory

I've included this link in my styles.scss @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap'); While it works locally, the API fails on production or is blocked. How can I host it within my p ...

javascriptcssangulartypescriptsass

What is the process for adjusting the checkbox border color in Material Design 15 and above?

Ever since the latest update to Angular Material 15, I've noticed some changes in how styling is applied to Angular Material components. Previously, in version 14, I used to be able to accomplish styling changes with code like this: ::ng-deep .mat-che ...

cssangular-material

adverse offset and backdrop

To achieve the desired layout, I am trying to adjust the negative margin for the .text div so that it aligns on top of the .image div. <div class="wrap"> <div class="image"><img src="imgage.jpg" /></div> <div class="text ...

htmlcss

The Bootstrap Navbar fails to function properly when viewed on mobile devices

As a newcomer to BOOTSTRAP 5 and web development in general, I am currently working on creating a simple website using it. I have added a navigation bar, but when I switch my browser to mobile mode, the dropdown menu doesn't work properly and all the ...

htmlcssbootstrap-5

Styling a clock with rounded corners using CSS: Border-radius trick

Attempting to craft a analog 12-hour clock using basic CSS properties, I initiated the process by forming a square div of the size 500px. Applying a border-radius of 250px resulted in an aesthetically pleasing circle design. Following this step, I incorpor ...

htmlgeometrycss

Activating the onclick function to open a tab and automatically position the cursor inside a textfield

I have a requirement to automatically place the cursor on a specific field whenever a rich tab is navigated to. I attempted using onclick and onlabelclick on the richTab, but it did not work as expected. Then, I tried utilizing ontabenter, which called my ...

javajavascriptjqueryhtmljsf

Encountering additional backslashes ("") in each slash within the JSON response received from Laravel AJAX

I have been working on my Laravel app and attempting to make an ajax call. However, I am encountering an issue where there is one extra slash being added, whether it's a backslash or a forward slash. Can someone please explain why this is happening an ...

htmljsonajaxlaravel

Using Ajax in a separate JavaScript file

How can I retrieve data from an Ajax call made from a different .js file? Here is the code snippet I have been working with: function ajax(url, success, error) { success += "(data)"; error += "(xhr, ajaxOptions, thrownError)"; console.log("St ...

ajaxhtmljquery-mobile

Customize bootstrap cards to have a full height and add a bottom margin to enhance the

My current project involves creating a grid of Bootstrap 4 cards that need to meet specific requirements: All cards must be contained within a single class="row" div. This is because the number of cards is unknown and I want the layout to adjust well acr ...

cssheightbootstrap-4marginbootstrap-grid

Is there a way for me to attach a link to a picture displayed in a lightbox that directs to an external ".html" file?

I have a platform where users can view images in a gallery and when they click on an image, it opens up in a lightbox. I am trying to add a feature where the opened image can be clicked again to redirect the user to an external page. I attempted to nest t ...

javascriptcsshtmllightbox

Switch between different table rows

I have here a table that is used for displaying menu and submenu items. It's a mix of PHP (to fetch the menu items and their respective submenus) and HTML. What I am trying to figure out is how to toggle the visibility of only the submenu items under ...

javascriptphpjqueryhtmlcss

Choosing the type attribute of an input tag by using a javascript variable as a condition: What's the best approach?

I am currently utilizing an input tag on the client side to receive text input. <input type="text" class="form-control" placeholder="Enter Message" id="messageText" autofocus/> My goal now is to dynamically set the type attribute based on a Javasc ...

javascripthtml

Is there a way to restrict keyboard input on this date picker?

Can you review the following link and let me know which properties or events I should utilize in this scenario? https://codesandbox.io/s/charming-frost-qrvwe?file=/src/App.js ...

javascripthtmlreactjsdommaterial-ui

What is the process for linking my HTML page to my CSS stylesheet?

This is similar to what I have in the content of my HTML page. <link rel="stylesheet" type="text/css" href="/untitled2.css"> I thought this was right, but it doesn't seem to be functioning. Any ideas on what might be wrong? ...

htmlcss

Rearrange divs from left to right on mobile display

I need help creating a header bar with three elements as shown below https://i.sstatic.net/4njuk.png When viewed on mobile, I want the menu (toggle-icon) to shift left and the logo to be centered. I attempted using push and pull with no success. Is there ...

htmlcssbootstrap-4

"Challenges encountered while trying to format a table responsively with Bootstrap CSS

My objective is to display two tables side by side, with the right table overflowing horizontally. However, I am currently facing an issue where the second table is being pushed below the first one. Any assistance on resolving this problem would be highly ...

htmlbootstrap-5

navigating up and down html elements using css selectors

Within my code, I have this odd repetitive HTML structure (with no classes) and I'm looking to extract all links along with the accompanying text below each link. While it's simple enough to grab all the links using a basic CSS query selector li ...

jquerycsscss-selectorsdom-traversal

Is it possible to style a nested ID with CSS?

Imagine a scenario where you are working within an HTML file that you cannot modify, but you have the ability to only edit the CSS through a stylesheet. Is it possible to target an ID within another ID in the same way you can do with classes? #id1 #id2 {s ...

htmlcsscss-selectors

Graph is vanishing while linked

A unique HTML canvas is included in a standalone file called dashboard.html. To display the dashboard on the main homepage (home.html), we utilize ng-view nested within an ng-if directive. Oddly, clicking on the hyperlink "#" from the home page causes th ...

javascripthtmlcssangularjschart.js

Exploring the asynchronous for loop functionality in the express.js framework

I'm attempting to use a for loop to display all images. I have stored the paths of the images in an array called Cubeimage. However, when trying to display them using <img>, I encountered an error. How can I write asynchronous code to make it wo ...

javascripthtmlexpressweb