Question

我知道关于水平居中文本的主题有无数的主题。但我使用搜索功能并尝试了答案。但它没有用。

我尝试了margin-left：auto，margin-right：auto，text-align：center等用于类nav-center。那没用。

我希望导航栏中心的Lorem Ipsum。

我做错了什么？

这是我的代码：

String path = "images/"+imgName;
ByteArrayOutputStream baos = new ByteArrayOutputStream();
// this will compress an image that the uplaod and download would be faster
bitmap.compress(Bitmap.CompressFormat.JPEG, 50, baos);
byte[] data = baos.toByteArray();
FirebaseStorage storage = FirebaseStorage.getInstance();
StorageReference storageReference = storage.getReference();
StorageReference reference = storageReference.child(path);
UploadTask uploadTask = reference.putBytes(data);
uploadTask.addOnSuccessListener(new OnSuccessListener<UploadTask.TaskSnapshot>() {
     @Override
     public void onSuccess(UploadTask.TaskSnapshot taskSnapshot) {
         Log.i(TAG, "Image was saved");
     }
 }).addOnFailureListener(new OnFailureListener() {
     @Override
     public void onFailure(@NonNull Exception e) {
         Log.e(TAG, "Image wasn't saved. Exception: "+e.getMessage());
     }
 });

/*****************************************************************************************************************************************/
/************************************************************* styles.css ***************************************************************/
/*****************************************************************************************************************************************/


/*****************************************************************************************************************************************/
/* *** START:General Settings *** */
/*****************************************************************************************************************************************/

html{
  font-size: 62.5%;
}

body {
  margin: 0;
  font-family: 'Raleway', 'Lato', 'Helvetica Neue', 'Arial', sans-serif;
  font-size: 1.6rem;
}

* {
  box-sizing: border-box;
}

/*****************************************************************************************************************************************/
/* *** END:General Settings  *** */
/*****************************************************************************************************************************************/


/*****************************************************************************************************************************************/
/* *** START:Navigation *** */
/*****************************************************************************************************************************************/

.navigation {
  width: 100%;
  height: 5rem;
  background-color: #3d3f45;
  font-weight: 400;
}

.navigation > div {
  height:100%;
  display: inline-block;
  position: relative;
}


/* *** START: Nav-Logo *** */
nav div.nav-logo img {
  height: 3rem;
  width: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left:2rem;
}
/* *** END: Nav-Logo *** */


/* *** START: Nav-Center *** */
nav .nav-center {
  text-align: center;
  margin-left:auto;
  margin-right:auto;
}

nav .nav-center > ul{
    display: inline-block;
}
/* *** END: Nav-Center *** */


/* *** START: Nav-End *** */
div.nav-end {
  float:right;
}
/* *** END: Nav-End *** */


/* *** START: Nav-Items *** */
div.nav-items ul {
  height: 100%;
  margin: 0;
}

div.nav-items ul li {
  display: inline-block;
  height:100%;
  padding: 0 1rem;
}

div.nav-items a {
  text-decoration: none;
  vertical-align: middle;
  line-height: 5rem;
}

div.nav-items a:link {
  color:#fff;
}

div.nav-items a:visited {
  color:#fff;
}

div.nav-items a:hover,
div.nav-items a:active {
  color:#e5e5e5;
}

.active {
  background-color: #a62c21;
}
/* *** END: Nav-Nav-Items *** */

/*****************************************************************************************************************************************/
/* *** END:Navigation *** */
/*****************************************************************************************************************************************/

Answer 1

从css第41行的div元素中删除height: 100%;，对于horizental中心，您需要为容器设置宽度我确实编辑了你的css，你的右侧导航区域有49％的宽度，左侧导航区域有50％可以居中，另一种方法是使用flex

/*****************************************************************************************************************************************/
/************************************************************* styles.css ***************************************************************/
/*****************************************************************************************************************************************/


/*****************************************************************************************************************************************/
/* *** START:General Settings *** */
/*****************************************************************************************************************************************/

html{
  font-size: 62.5%;
}

body {
  margin: 0;
  font-family: 'Raleway', 'Lato', 'Helvetica Neue', 'Arial', sans-serif;
  font-size: 1.6rem;
}

* {
  box-sizing: border-box;
}

/*****************************************************************************************************************************************/
/* *** END:General Settings  *** */
/*****************************************************************************************************************************************/


/*****************************************************************************************************************************************/
/* *** START:Navigation *** */
/*****************************************************************************************************************************************/

.navigation {
  width: 100%;
  height: 5rem;
  background-color: #3d3f45;
  font-weight: 400;
}

.navigation > div {
  display: inline-block;
  position: relative;
}


/* *** START: Nav-Logo *** */
nav div.nav-logo img {
  height: 3rem;
  width: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left:2rem;
}
/* *** END: Nav-Logo *** */


/* *** START: Nav-Center *** */
nav .nav-center {
  text-align: center;
  margin-left:auto;
  margin-right:auto;
  width: 50%;
}

nav .nav-center > ul{
    display: inline-block;
}
/* *** END: Nav-Center *** */


/* *** START: Nav-End *** */
div.nav-end {
  float:right;
  width:49%;
}
/* *** END: Nav-End *** */


/* *** START: Nav-Items *** */
div.nav-items ul {
  height: 100%;
  margin: 0;
}

div.nav-items ul li {
  display: inline-block;
  height:100%;
  padding: 0 1rem;
}

div.nav-items a {
  text-decoration: none;
  vertical-align: middle;
  line-height: 5rem;
}

div.nav-items a:link {
  color:#fff;
}

div.nav-items a:visited {
  color:#fff;
}

div.nav-items a:hover,
div.nav-items a:active {
  color:#e5e5e5;
}

.active {
  background-color: #a62c21;
}
/* *** END: Nav-Nav-Items *** */

/*****************************************************************************************************************************************/
/* *** END:Navigation *** */
/*****************************************************************************************************************************************/

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>Home</title>
    <link rel="stylesheet" type="text/css" href="src/css/styles.css">
  </head>
  <body>

    <!-- **************************************************************************************************************************************************** -->
    <!-- ***   START: Navigation *** -->
    <!-- **************************************************************************************************************************************************** -->

    <nav class="navigation">

      <!-- *** START: Logo *** -->
      <div class="nav-logo">
        <a href="index.html">
          <img src="src/img/logo.png" alt="logo">
        </a>
      </div>
      <!-- *** END: Logo *** -->


      <!-- *** START: Nav-Center *** -->
      <div class ="nav-center nav-items">
        <ul>
          <li><a href="#">Lorem</a></li>
          <li><a href="#">Ipsum</a></li>
        </ul>
      </div>
      <!-- *** END: Nav-Center *** -->


      <!-- *** START: Nav-End *** -->
      <div class="nav-end nav-items">
        <ul>
          <li class="active"><a href="index.html">Page 1</a></li>
          <li><a href="#">Page 2</a></li>
          <li><a href="#">Page 3</a></li>
          <li><a href="#">Page 4</a></li>
        </ul>
      </div>
      <!-- *** END: Nav-End *** -->

    </nav>

    <!-- **************************************************************************************************************************************************** -->
    <!-- *** END: Navigation *** -->
    <!-- **************************************************************************************************************************************************** -->






  </body>
</html>

Answer 2

如果你想集中

 .navigation {
    display:flex
 }
 .navigation > div {
   /*height: 100%;*/
   display: inline-block;
   position: relative;
}

Answer 3

试试这个。它可能对你有帮助。

.navigation{
    text-align:center;
}

.nav-logo{
    float:left;
}

nav .nav-center{
    float:none;
}

Answer 4

html{
  font-size: 62.5%;
}

body {
  margin: 0;
  font-family: 'Raleway', 'Lato', 'Helvetica Neue', 'Arial', sans-serif;
  font-size: 1.6rem;
}

* {
  box-sizing: border-box;
}



.navigation {
  height: 5rem;
  background-color: #3d3f45;
  font-weight: 400;
}

.navigation > div {
  height:100%;
  display: inline-block;
  position: relative;
}


/* *** START: Nav-Logo *** */
nav div.nav-logo img {
  height: 3rem;
  width: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left:2rem;
}
/* *** END: Nav-Logo *** */


/* *** START: Nav-Center *** */
nav .nav-center {
  text-align: center;
  margin-left:auto;
  margin-right:auto;
}

nav .nav-center > ul{
    display: inline-block;
}
/* *** END: Nav-Center *** */


/* *** START: Nav-End *** */
div.nav-end {
  float:right;
}
/* *** END: Nav-End *** */


/* *** START: Nav-Items *** */
div.nav-items ul {
  height: 100%;
  margin: 0;
}

div.nav-items ul li {
  display: inline-block;
  height:100%;
  padding: 0 1rem;
}

div.nav-items a {
  text-decoration: none;
  vertical-align: middle;
  line-height: 5rem;
}

div.nav-items a:link {
  color:#fff;
}

div.nav-items a:visited {
  color:#fff;
}

div.nav-items a:hover,
div.nav-items a:active {
  color:#e5e5e5;
}

.active {
  background-color: #a62c21;
}
/* *** END: Nav-Nav-Items *** */

/*****************************************************************************************************************************************/
/* *** END:Navigation *** */
/*****************************************************************************************************************************************/
</style>

<body>
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>Home</title>
    <link rel="stylesheet" type="text/css" href="src/css/styles.css">
  </head>
  <body>

    <!-- **************************************************************************************************************************************************** -->
    <!-- ***   START: Navigation *** -->
    <!-- **************************************************************************************************************************************************** -->

    <nav class="navigation">

      <!-- *** START: Logo *** -->
      <div class="nav-logo" style="float: left; text-align: center; width: 50%">
        <a href="index.html">
          <img src="src/img/logo.png" alt="logo">
        </a>
      </div>
      <!-- *** END: Logo *** -->


      <!-- *** START: Nav-Center *** -->
      <div class ="nav-center nav-items">
        <ul>
          <li><a href="#">Lorem</a></li>
          <li><a href="#">Ipsum</a></li>
        </ul>
      </div>
      <!-- *** END: Nav-Center *** -->


      <!-- *** START: Nav-End *** -->
      <div class="nav-end nav-items">
        <ul>
          <li class="active"><a href="index.html">Page 1</a></li>
          <li><a href="#">Page 2</a></li>
          <li><a href="#">Page 3</a></li>
          <li><a href="#">Page 4</a></li>
        </ul>
      </div>
      <!-- *** END: Nav-End *** -->

    </nav>


  </body>
</html>
</body>

Answer 5

删除以下css

nav div.nav-logo img {
  height: 3rem;
  width: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left:2rem;
}

并在下面添加css

nav div.nav-logo a {
  vertical-align: middle;
  display: inline-block;
}

＆＃13;

/*****************************************************************************************************************************************/
/************************************************************* styles.css ***************************************************************/
/*****************************************************************************************************************************************/


/*****************************************************************************************************************************************/
/* *** START:General Settings *** */
/*****************************************************************************************************************************************/

html{
  font-size: 62.5%;
}

body {
  margin: 0;
  font-family: 'Raleway', 'Lato', 'Helvetica Neue', 'Arial', sans-serif;
  font-size: 1.6rem;
}

* {
  box-sizing: border-box;
}

/*****************************************************************************************************************************************/
/* *** END:General Settings  *** */
/*****************************************************************************************************************************************/


/*****************************************************************************************************************************************/
/* *** START:Navigation *** */
/*****************************************************************************************************************************************/

.navigation {
  width: 100%;
  height: 5rem;
  background-color: #3d3f45;
  font-weight: 400;
  position: relative;
}

.navigation > div {
  height:100%;
  display: inline-block;
  position: relative;
}


/* *** START: Nav-Logo *** */
nav div.nav-logo img {
  /*height:3rem;
  width: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left:2rem; */
}
nav div.nav-logo a {
  vertical-align: middle;
  display: inline-block;
}
/* *** END: Nav-Logo *** */


/* *** START: Nav-Center *** */
nav .nav-center {
  text-align: center;
  margin-left:auto;
  margin-right:auto;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

nav .nav-center > ul{
    display: inline-block;
}
/* *** END: Nav-Center *** */


/* *** START: Nav-End *** */
div.nav-end {
  float:right;
}
/* *** END: Nav-End *** */


/* *** START: Nav-Items *** */
div.nav-items ul {
  height: 100%;
  margin: 0;
}

div.nav-items ul li {
  display: inline-block;
  height:100%;
  padding: 0 1rem;
}

div.nav-items a {
  text-decoration: none;
  vertical-align: middle;
  line-height: 5rem;
}

div.nav-items a:link {
  color:#fff;
}

div.nav-items a:visited {
  color:#fff;
}

div.nav-items a:hover,
div.nav-items a:active {
  color:#e5e5e5;
}

.active {
  background-color: #a62c21;
}
/* *** END: Nav-Nav-Items *** */

/*****************************************************************************************************************************************/
/* *** END:Navigation *** */
/*****************************************************************************************************************************************/

＆＃13;

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>Home</title>
    <link rel="stylesheet" type="text/css" href="src/css/styles.css">
  </head>
  <body>

    <!-- **************************************************************************************************************************************************** -->
    <!-- ***   START: Navigation *** -->
    <!-- **************************************************************************************************************************************************** -->

    <nav class="navigation">

      <!-- *** START: Logo *** -->
      <div class="nav-logo">
        <a href="index.html">
          <img src="src/img/logo.png" alt="logo">
        </a>
      </div>
      <!-- *** END: Logo *** -->


      <!-- *** START: Nav-Center *** -->
      <div class ="nav-center nav-items">
        <ul>
          <li><a href="#">Lorem</a></li>
          <li><a href="#">Ipsum</a></li>
        </ul>
      </div>
      <!-- *** END: Nav-Center *** -->


      <!-- *** START: Nav-End *** -->
      <div class="nav-end nav-items">
        <ul>
          <li class="active"><a href="index.html">Page 1</a></li>
          <li><a href="#">Page 2</a></li>
          <li><a href="#">Page 3</a></li>
          <li><a href="#">Page 4</a></li>
        </ul>
      </div>
      <!-- *** END: Nav-End *** -->

    </nav>

    <!-- **************************************************************************************************************************************************** -->
    <!-- *** END: Navigation *** -->
    <!-- **************************************************************************************************************************************************** -->






  </body>
</html>

＆＃13;

Answer 6

在您的HTML文档的第27行中，您编写了“div class =”nav -center nav-items“”，因此我认为这是您问题的最佳部分。由于HTML和CSS都是严格的，因此您必须在CSS中添加具有该确切名称的类。（对不起，如果我没看到的话）

之后你应该再尝试边距和/或填充。另外，请检查元素的位置是固定的还是相对的。因为如果它是固定的，它将始终保持在原来的位置，而当它相对时，你决定把它放在哪里，它将用于exp。如果用户决定向下滚动或缩小窗口，则滑动。所以你可能也必须解决这个问题。

也许它可以帮助您将导航栏想象成一张桌子。在表格中，您可以使用特定属性定义每个行，列或单元格。因此，如果您查看导航栏，您不仅可以定义导航栏本身，还可以定义div，因为它们是导航栏的一部分。例如，您可以说：

.navbar{

         width: 90%;
}

例如，如果您有三个div，则必须将它们与导航栏“匹配”。所以只需将它的宽度（在本例中）分成三个：

.navbardiv1 {
         width: 30%;
}

.navbardiv2 {
        width: 30%;
}

.navbardiv3 {
        width: 30%
}

你也可以让你的div向左，向右或向中心浮动。

.navbardiv1 {
       float: left;
}

.navbardiv2 {
      float: center;
}

.navbardiv3 {
       float: right;
}

我希望这会帮助您解决问题，并且我理解您的正确，如果不是，请告诉我。

Answer 7

更新了css

nav .nav-center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

＆＃13;

/*****************************************************************************************************************************************/
/************************************************************* styles.css ***************************************************************/
/*****************************************************************************************************************************************/


/*****************************************************************************************************************************************/
/* *** START:General Settings *** */
/*****************************************************************************************************************************************/

html{
  font-size: 62.5%;
}

body {
  margin: 0;
  font-family: 'Raleway', 'Lato', 'Helvetica Neue', 'Arial', sans-serif;
  font-size: 1.6rem;
}

* {
  box-sizing: border-box;
}

/*****************************************************************************************************************************************/
/* *** END:General Settings  *** */
/*****************************************************************************************************************************************/


/*****************************************************************************************************************************************/
/* *** START:Navigation *** */
/*****************************************************************************************************************************************/

.navigation {
  width: 100%;
  height: 5rem;
  background-color: #3d3f45;
  font-weight: 400;
}

.navigation > div {
  height:100%;
  display: inline-block;
  position: relative;
}


/* *** START: Nav-Logo *** */
nav div.nav-logo img {
  height: 3rem;
  width: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left:2rem;
}
/* *** END: Nav-Logo *** */


/* *** START: Nav-Center *** */
nav .nav-center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

nav .nav-center > ul{
    display: inline-block;
}
/* *** END: Nav-Center *** */


/* *** START: Nav-End *** */
div.nav-end {
  float:right;
}
/* *** END: Nav-End *** */


/* *** START: Nav-Items *** */
div.nav-items ul {
  height: 100%;
  margin: 0;
}

div.nav-items ul li {
  display: inline-block;
  height:100%;
  padding: 0 1rem;
}

div.nav-items a {
  text-decoration: none;
  vertical-align: middle;
  line-height: 5rem;
}

div.nav-items a:link {
  color:#fff;
}

div.nav-items a:visited {
  color:#fff;
}

div.nav-items a:hover,
div.nav-items a:active {
  color:#e5e5e5;
}

.active {
  background-color: #a62c21;
}
/* *** END: Nav-Nav-Items *** */

/*****************************************************************************************************************************************/
/* *** END:Navigation *** */
/*****************************************************************************************************************************************/

＆＃13;

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>Home</title>
    <link rel="stylesheet" type="text/css" href="src/css/styles.css">
  </head>
  <body>

    <!-- **************************************************************************************************************************************************** -->
    <!-- ***   START: Navigation *** -->
    <!-- **************************************************************************************************************************************************** -->

    <nav class="navigation">

      <!-- *** START: Logo *** -->
      <div class="nav-logo">
        <a href="index.html">
          <img src="src/img/logo.png" alt="logo">
        </a>
      </div>
      <!-- *** END: Logo *** -->


      <!-- *** START: Nav-Center *** -->
      <div class ="nav-center nav-items">
        <ul>
          <li><a href="#">Lorem</a></li>
          <li><a href="#">Ipsum</a></li>
        </ul>
      </div>
      <!-- *** END: Nav-Center *** -->


      <!-- *** START: Nav-End *** -->
      <div class="nav-end nav-items">
        <ul>
          <li class="active"><a href="index.html">Page 1</a></li>
          <li><a href="#">Page 2</a></li>
          <li><a href="#">Page 3</a></li>
          <li><a href="#">Page 4</a></li>
        </ul>
      </div>
      <!-- *** END: Nav-End *** -->

    </nav>

    <!-- **************************************************************************************************************************************************** -->
    <!-- *** END: Navigation *** -->
    <!-- **************************************************************************************************************************************************** -->






  </body>
</html>

＆＃13;

为什么我的菜单项不在中心（不使用flexbox）？

7 个答案: