css一个框中放图片和文字（css一个框中放图片和文字怎么放）

在网页设计中，我们经常需要在一个框里同时放置图片和文字。这时候，就需要使用CSS来实现。下面是一个例子：

HTML代码：div class="box">
    img src="图片地址" alt="图片描述">
    p>
    这里是文字描述/p>
    /div>
CSS代码：.box {
    display: flex;
       /*设置flex布局*/align-items: center;
      /*垂直居中*/justify-content: center;
     /*水平居中*/width: 300px;
    height: 300px;
    border: 1px solid #000;
}
img {
    width: 50%;
      /*设置图片宽度*/height: 50%;
    margin-right: 20px;
  /*设置图片与文本之间的间距*/}
p {
    flex: 1;
  /*自适应宽度*/}
    

在这个例子中，我们采用了flex布局来实现图片和文字的对齐和居中。首先，设置.box的display属性为flex，align-items属性为center，justify-content属性为center，这样就使得图片和文本都在水平和垂直方向上居中了。

然后，我们对图片和文本分别进行样式设置。设置图片的宽度和高度为50%，同时设置margin-right属性为20px，这样就使得图片与文本之间有一定的间距了。接着设置文本的flex属性为1，这样就可以自适应宽度了。

这样，一个包含图片和文字的框就完成了。实际应用中，可以根据具体的需要进行样式的调整和修改。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！