css一张图片一个名字好看的布局效果图和实现代码

以下是一个示例的CSS布局代码和效果图，用于展示一张图片和一个名字的好看布局：

HTML代码：

<div class="container">
  <img src="your-image.jpg" alt="Your Image">
  <h1>Your Name</h1>
</div>

CSS代码：

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

img {
  width: 200px;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

h1 {
  margin-top: 10px;
  font-size: 24px;
  color: #333;
}

效果图：

在上述代码中，我们使用了flexbox布局来将图片和标题放置在一个容器中。容器通过`display: flex`来启用flex布局，并通过`flex-direction`设置为`column`来垂直堆叠子元素。`align-items: center`和`justify-content: center`用于在容器中居中对齐子元素。`text-align: center`用于将标题文本居中对齐。

图片设置了固定的宽度，并通过`border-radius`属性设置为圆形。`box-shadow`属性添加了一个轻微的阴影效果，使图片更加突出。

标题使用了自定义的字体大小、颜色和上边距，你可以根据需要进行调整。

请将`your-image.jpg`替换为你自己的图片路径，并将`Your Name`替换为你想要显示的名字。