Question

我正在使我的页面响应屏幕大小（最大宽度：991px）到（最小宽度：768px）。在这里，我有一张图片，下面有一些文字，我希望它在中心水平对齐： -

import java.util.*;

public class variableMethod
{
    public static void main(String[] satharel)
    {
        System.out.printf("The product of 5 and 10: \t\t%3d%n", productFinder(5, 10));
        System.out.printf("The product of 2 and 3 and 4: \t\t%3d%n", productFinder(2, 3, 4));
        System.out.printf("The product of 1 and 2 and 3: \t\t%3d%n", productFinder(1, 2, 3));
        System.out.printf("The product of 7 and 2 and 4 and 5: \t%3d%n", productFinder(7, 2, 4, 5));

    }

    public static int productFinder(int... num)
    {
        ArrayList<Integer> numbers = new ArrayList<Integer>();

        for(int n : num)
            numbers.add(n);

        int first = numbers.get(0);

        for(int i = 1; i < numbers.size(); i++)
            first *= numbers.get(i);

        return first;
    }
}

Answer 1

嗯，你当然可以用CSS轻松做到这一点。

.name_titles {
  text-align:center;
}

Answer 2

text-align: center将文本和内嵌元素居中

请注意，p内的span元素不允许这样做，因此我将span更改为div

.pictures_titles {
  background: gray;
  text-align: center;
}

<div class="col-lg-2 pictures_titles">
  <img class="team_img" src="http://placehold.it/300x150">
  <br><br>
  <div class="name_titles">
    <div id="namess" style="color:white;">
      <p> JAMES WILLIAMS </p>
    </div>
    <br>
    <div id="storys1" style="color:white;">
      <p> An experienced strategist and entrepreneur, he is the Founder and Managing Director of gorb.</p>
    </div>
  </div>
</div>

如果您希望文字位于图片的边界内，您可以使用display: table-caption

这样做

body {
  background: gray;
}
.pictures_titles {
  display: table;
  margin: 0 auto;
  text-align: center;
}
.name_titles {
  display: table-caption;
}

<div class="col-lg-2 pictures_titles">
  <div class="name_titles">
    <img class="team_img" src="http://placehold.it/300x150">
    <br><br>
    <div id="namess" style="color:white;">
      <p> JAMES WILLIAMS </p>
    </div>
    <br>
    <div id="storys1" style="color:white;">
      <p> An experienced strategist and entrepreneur, he is the Founder and Managing Director of gorb.</p>
    </div>
  </div>
</div>

Answer 3

如果您想要将图像放在中心并且文本在下方也与中心对齐，请使用 -

 <div class="col-lg-2 pictures_titles" style="text-align:center;">
             <img class="team_img" src="../assets/img/Website-Png/About-Us-01-3.png">
             <br><br>
             <div class="name_titles">
                 <span id="namess" style="color:white;"><p> JAMES WILLIAMS </p></span>
             <br>
            <div id="storys1" style="color:white;">
                 <p> An experienced strategist and entrepreneur, he is the Founder and Managing Director
             of gorb.</p> </div>
             </div>
        </div>

如何水平对齐div中心的图片下方的文本

3 个答案: