Question

我必须在学校建立一个计算机科学网站，我的菜单栏居中有问题。我希望它以菜单按钮为中心，但它将图标偏离我的方式。

如何围绕中央<script type="text/javascript"> function initMap() { var map = new google.maps.Map(document.getElementById('map'), { center: {lat: 43.618928, lng: -116.274319}, zoom: 11 }); var infowindow = new google.maps.InfoWindow(); var service = new google.maps.places.PlacesService(map); var locA = service.getDetails({ placeId: 'ChIJa_maRXxRrlQRSimVL1yUG8Q' }, function(place, status) { console.log(place); console.log(status); if (status === google.maps.places.PlacesServiceStatus.OK) { var marker = new google.maps.Marker({ map: map, position: place.geometry.location }); google.maps.event.addListener(marker, 'click', function() { infowindow.setContent('<img src="' + place.icon + '" />' + place.name + ' Rating: ' + place.rating + ' Vicinity: ' + place.vicinity + ''); infowindow.open(map, this); }); } }); var locB = service.getDetails({ placeId: 'ChIJow1xfMRUrlQR6ewuO4NvrF0' }, function(place, status) { console.log(place); console.log(status); if (status === google.maps.places.PlacesServiceStatus.OK) { var marker = new google.maps.Marker({ map: map, position: place.geometry.location }); google.maps.event.addListener(marker, 'click', function() { infowindow.setContent('<img src="' + place.icon + '" />font style="color:#000;">' + place.name + ' Rating: ' + place.rating + ' Vicinity: ' + place.vicinity + ''); infowindow.open(map, this); }); } }); }元素中心整个菜单？

以下是代码：

li

<!DOCTYPE html>
<html>
<head>
    <title> Homepagina </title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <link href='https://fonts.googleapis.com/css?family=Raleway:300' rel='stylesheet' type='text/css'>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
</head>
<body>

    <div class="menuBar">
        <ul>
            <li> <a href="#"> Over mij </a> </li>
            <li> <a href="#"> Hobbies </a> </li>
            <li> <a href="#"> <img src="logoNaam.jpg"> </a> </li>
            <li> <a href="#"> Muziek </a> </li>
            <li> <a href="#"> Waarom informatica </a> </li>
        </ul>
    </div>

    <div class="jumbotron">
        <div class="container">

            hoi

        </div>
    </div>

</body>
</html>

Answer 1

以下是代码中的更改：

你必须添加：

.menuBar ul{
padding-left: 0px;}

也重申：

.menuBar ul li {
display: inline;
padding-right: 65px;
line-height: 70px;}

带

.menuBar ul li {
display: inline-block;
width: 150px;
padding-right: 15px;
line-height: 70px;}

同时从width: 100px;

中删除.menuBar ul li a

最好减小字体大小，使其在框架中保持良好对齐。

Answer 2

我使用flexbox布局使图像居中。图像始终位于页面的正中心，菜单项目位于居中图像的左侧和右侧。

我调整了字体大小和填充，以便在演示中显示出来。我还需要将li更改为div以使菜单在更改后以语义方式工作。

现场演示：

body {
    background-color: /*#C94421*/ #353535;
    margin: 0; /* reset de standard marges van de body -> geen randen links en rechts naast .menuBar div */
    text-align: center;
}

.menuBar {
    height: 70px;
    width: 100%;
}

.menuBar img {
    text-align: center;
}

.menuBar {
    display: flex;
}

.menuBar > div {
    display: block;
    line-height: 70px;
    flex-basis: 0;
    flex-grow: 1;
}

.left {
    text-align: right;
}

.right {
    text-align: left;
}

.menuBar > div > div {
    display: inline-block;
    padding: 0 15px;
}
.menuBar > div.central {
    flex-basis: auto;
    flex-grow: 0;
    padding: 0 15px;
}

.menuBar > div a {
    color: white;
    text-decoration: none;
    line-height: 70px;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    width: 100px;
}

.menuBar a:hover {
    border-bottom: 1px solid white;
}

.jumbotron .container {
    height: 550px;
    width: 60%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px;
    border-top: 4.5px double white;
    border-bottom: 4.5px double white;
}

<div class="menuBar">
            <div class="left"><div> <a href="#"> Over mij </a> </div>
                <div> <a href="#"> Hobbies </a> </div></div>
            <div class="central"> <a href="#"> <img src="logoNaam.jpg"> </a> </div>
                <div class="right">
            <div> <a href="#"> Muziek </a> </div>
            <div> <a href="#"> Waarom informatica </a> </div>
                </div>
    </div>

    <div class="jumbotron">
        <div class="container">

            hoi

        </div>
    </div>

JSFiddle版本：https://jsfiddle.net/2ejfdoc3/1/

以中心li元素为中心的内联ul / li

2 个答案: