的更新

Question

我很抱歉，如果这是一个转贴，但这是我现在在这里研究了一段时间，我似乎无法找到正确的答案。我试图让这些图像显示在页面的正中心，下面有标题，但它们会继续在页面的左侧。

这是我的HTML

<figure>
    <img src="apple.jpg" alt='apple/>
    <figcaption>Apple</figcaption>           
</figure>       
<figure>
    <img src="apple.jpg" alt='apple'/>
    <figcaption>Apple</figcaption>           
</figure>
<figure>
    <img src="apple.jpg" alt='apple'/>
    <figcaption>Apple</figcaption>           
</figure>

和css

figure{
   display: inline-block;
   margin: 0 auto;
}
figure img{
   vertical-align: top;                 
}
figure figcaption{
   text-align: center;
}

这就是我所看到的：

提前致谢。我非常感谢任何帮助。

Answer 1

您希望它们水平或垂直对齐吗？

垂直：

"repositories": [
    {
        "type": "vcs",
        "url": "https://github.com/miteshmap/axelerant_custom"
    }
],
"require": {
    "miteshmap/axelerant_custom": "*"
},
"extra": {
    "installer-paths": {
        "web/core": ["type:drupal-core"],
        "web/modules/contrib/{$name}": ["type:drupal-module"],
        "web/modules/custom/{$name}": ["type:drupal-module"],
        "web/profiles/contrib/{$name}": ["type:drupal-profile"],
        "web/themes/contrib/{$name}": ["type:drupal-theme"],
        "drush/contrib/{$name}": ["type:drupal-drush"]
    }
}

横向：

figure {
  display: block;
  text-align: center
}

Answer 2

的更新

OP已经澄清了图像是并排的并且也是垂直居中的。

将所有内容放在div或section中（任何块元素都可以）

我使用了// Update a contact with a new name public void updatename (String phone, String newname) { newname = newname.replaceAll("'","\'"); String query = "UPDATE contacts SET name = '"+newname+"' WHERE phone = '"+phone+"'"; SQLiteDatabase db = this.getWritableDatabase(); db.execSQL(query); //db.close(); }以下样式：

section会让它像桌子一样行事

display: table;会使其与视口（您的屏幕）一样高

height: 100vh; auto会左右调整，直到两者相等

在图中添加了以下内容：

margin: 0 auto;会让它像表格一样

display: table-cell;实际上可以处理表格单元格

更新了代码段

＆＃13;
＆＃13;
vertical-align : middle;
＆＃13;
section { display: table; height: 100vh; margin: 0 auto; } figure { vertical-align : middle; display: table-cell; margin: 0 auto; text-align: center; } figure img { width: 20em; } figure figcaption { text-align: center; }
＆＃13;
＆＃13;
＆＃13;

<小时/> - 那里有一个＆＃34;＆＃39;＆＃34;＆＃34;＆＃34;＆＃34;＆＃34; （单引号）在第一个<section> <figure> <img src="http://i.imgur.com/r3m3gMJ.jpg" alt='apple' /> <figcaption>Apple</figcaption> </figure> <figure> <img src="http://i.imgur.com/r3m3gMJ.jpg" alt='apple' /> <figcaption>Apple</figcaption> </figure> <figure> <img src="http://i.imgur.com/r3m3gMJ.jpg" alt='apple' /> <figcaption>Apple</figcaption> </figure> </section>

上丢失

将数字更改为alt或将其删除，因为默认情况下数字为block。

将display: block添加到text-align: center

注意：原始图像偏离中心（当然），因此我将其编辑为对称。

请参阅下面的代码段。

<强>段

＆＃13;
＆＃13;
figure
＆＃13;
figure { margin: 0 auto; text-align: center; } figure img { vertical-align: top; width: 20em; } figure figcaption { text-align: center; }
＆＃13;
＆＃13;
＆＃13;

Answer 3

尝试使用Div容器包装元素以控制位置。这是一种hacky方式。但是您可以调整.center类以在页面上获取所需的位置，即调整右侧和/或左侧属性。

.container {
    position: center;
    width: 100%;
}

.center {
    position: absolute;
    right: 30%;
    width: 300px;
    background-color: #b0e0e6;
}

figure{
                display: inline-block;
                margin: 0 auto;
}
figure img{
                vertical-align: top;                    
}
figure figcaption{
                text-align: center;
}
</style>
</head>
<body>
<div class="container">
  <div class="center">
<figure>
    <img src="apple.jpg" alt='apple/>
    <figcaption>Apple</figcaption>           
</figure>       
<figure>
    <img src="apple.jpg" alt='apple'/>
    <figcaption>Apple</figcaption>           
</figure>
<figure>
    <img src="apple.jpg" alt='apple'/>
    <figcaption>Apple</figcaption>           
</figure>
  </div>
</div>

Answer 4

HTML

<figure>
    <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" />
    <figcaption>Apple</figcaption>           
</figure>       
<figure>
    <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" />
    <figcaption>Apple</figcaption>           
</figure>
<figure>
    <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" />
    <figcaption>Apple</figcaption>           
</figure>

CSS

figure{

                width:30%;
                display:inline-block;
               margin:1%;
               margin-left:1.5%;




}
figure img{
                width:100%;
                 display:block;
                  margin-left:auto;  
                  margin-right:auto;
}
figure figcaption{
                text-align: center;
}

https://jsfiddle.net/Ljdxnwot/3/

以字幕为中心的数字

4 个答案:

的更新