做一个居中有四个格子的导航栏 格子里放图片和文字 图片大小为30px，写一个代码

html部分可以这样写：

<div class="navbar">
  <div class="nav-item">
    <img src="image1.jpg" alt="image1" width="30">
    <p>Text1</p>
  </div>
  <div class="nav-item">
    <img src="image2.jpg" alt="image2" width="30">
    <p>Text2</p>
  </div>
  <div class="nav-item">
    <img src="image3.jpg" alt="image3" width="30">
    <p>Text3</p>
  </div>
  <div class="nav-item">
    <img src="image4.jpg" alt="image4" width="30">
    <p>Text4</p>
  </div>
</div>

CSS部分可以这样写：

.navbar {
  display: flex; /* 将子元素变为一行 */
  justify-content: center; /* 横向居中 */
  align-items: center; /* 纵向居中 */
}
.nav-item {
  display: flex; /* 将图片和文字变为一列 */
  flex-direction: column; /* 垂直排列 */
  justify-content: center; /* 内容纵向居中 */
  align-items: center; /* 内容横向居中 */
  margin: 0 10px; /* 间隔 */
}
.nav-item img {
  margin-bottom: 5px; /* 图片和文字之间的间隔 */
}

这样就可以在页面中得到一个居中有四个格子的导航栏，格子里放图片和文字，图片大小为30px的效果了。