Блог

Главная - Вопросы по программированию - Попытка центрировать список ссылок с левой стороны

Попытка центрировать список ссылок с левой стороны

#html #css #hyperlink

Вопрос:

 body {
    margin: 0;
    padding: 0;
    font-family: 'arial', serif;
}


                               

.nav {
    background-color:gray;
    color:#ffffff
    list-style: none;
    text-align: center;
    padding: 20px 0 20px 0;
    font-family: arial;
    
}
    
.nav > li {
    display: inline-block;
    padding-right: 50px;
    font-size: 16px;
    font-family: arial;
}

.nav> li > a {
text-decoration: none;
    color: #ffffff
}

.nav > li > a:hover {
    color:  #1a1b1bff;
}

.banner {
    width: 100%;
    display: block;
    background-color:#0000cbff;
    font-family:"serif";
    text-align: center;
    color: #ffffff;
    height: 18%;
    font-size: 90px;
    padding-top: 22px;
   
    
    
    }





.ad{
    
    width: auto;
    height: auto;
    margin-top: 10px;
    display: block;
    justify-content: center;
     align-content: center;
    display: flex;
  align-items: center;
}


.ad2
    {
        display: block;
        width: auto;
        height: 100%;
        float: right;
        margin-right: 10px;
        margin-bottom: 10px;
    }           

ul.nav{
  margin: 0;
}

body {
  width: 100%;
  float: left;
}

body {
max-width: 100%; margin: 0 auto }

p2{
    width: auto;
    height: auto;
    display: flex;
  justify-content: center;
  align-items: center;
}

.links{
    
    font-family: "imperial";
    font-size: 30px;
    text-decoration: none;
        color: #000;
        height: 50px;
        width: inherit;
        float: left;
    margin-top: 25%;
    list-style-type: none;
    text-align: center;
    margin-left: 10px;
    margin-bottom: auto;
        

}

  .slideshow {
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: inherit;
  margin-top: 5%;
  margin-bottom: 5%;
        }



.slideshowbuttonleft{
    
    color: black;
    float: left;
    width: auto
}

.slideshowbuttonright{
    
    color: black;
    float: right;
    width: auto;
}

.columns
{
align-content: center;
    display: flex;
  justify-content: center;
  align-items: center;
 margin-top: 5px;
    
} 
 <!DOCTYPE>
<html lang="en">
<head>
    <meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" type="text/css" href="Page.css">
    <link rel="stylesheet" type="text/css" href="mobilepage.css" media= "screen and (max-width: 900px)">
</head>
    
     
    
    <body>
    <div class="header">
        <div class="banner">
            
                 <banner>
  Business
</banner>
        
             

        </div>
        

    
<ul class="nav">
    

    
    <li><a href="Home.html">Home</a></li>
    <li><a href="Aboutus.html">About</a></li>   
    <li><a href="Menu.html">Menu</a></li> 
    <li><a href="Merchandise.html">Merchandise</a></li> 
    <li><a href="events.html">Events</a></li> 
    <li><a href="contactus.html">Contact Us</a></li>
        
        </ul> 
        
         <div class="ad">
    
            
        <a href= "www.website.com"> <img src="Ad.gif" width:"100" height="100" class="ad"></a>
             
        
        </div>
        
        <p2>
        <a href= "https://www.website.com/"> <img src="logo.png" width:"100" height="100" class="ad"></a>
        </p2>
        
        <div class="links">
            
        <li><a class="links" href="events.html">About</a></li>
        <li><a class="links" href="events.html">Gallery</a></li>
        <li><a class="links" href="events.html">Inter</a></li>
      
        </div>
    
        
               
         
    
    <div id="footer">
    <div class="social-popout">
    <div class="columns">
        
        <a class="social_me" href="https://www.instagram.com" target="_blank"><img src="instagramlogo.jpg" width:"100" height="100" alt="instagram" /></a>
        
        <a  class="social_me" href="https://www.facebook.com" target="_blank"><img  src="facebooklogo.jpg" width:"75" height="75" alt="Fb" /></a>
        
            <a  class="social_me" href="https://yelp.com" "_blank"><img src="yelp.png" width:"100" height="100" alt="Ylp" /></a>
    </div>
    
    
    
    
    <div class="ad2">
    
            
        <a href= "www.website.com"> <img src="Ad.gif"   class="ad2"></a>
             

    
        </div>


<div>
<div class="slideshow">
  <img class="mySlides" src="image1.jpg" style="width:50%">
  <img class="mySlides" src="image2.jpg" style="width:50%">
  <img class="mySlides" src="image3.jpg" style="width:50%">
  

 <button class="slideshowbuttonleft" onclick="plusDivs(-1)">amp;#10094;</button>
  <button class="slideshowbuttonright" onclick="plusDivs(1)">amp;#10095;</button>
</div>

    <style>
        
        
      
  
}</style>    
<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex  = n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i  ) {
    x[i].style.display = "none";  
  }
  x[slideIndex-1].style.display = "flex";  
}
        </script>
        
     
</body>
</html>

Как я могу сделать так, чтобы слова слева были в середине страницы слева? Я хочу, чтобы они были по центру, но они слишком далеки от заголовка. Я также, возможно, захочу добавить больше трех. В нем говорится, что в моем посте слишком много кода, я не знаю, что еще сюда добавить. Кроме того, если возникнут какие-либо другие проблемы с кодом, пожалуйста, дайте мне знать.

Спасибо

Комментарии:

1. Можете ли вы пересмотреть свой вопрос, включая только код, относящийся к вашему вопросу, чтобы мы могли видеть только ту часть, которую нам нужно рассмотреть?

Метки: