有没有办法在卡片内水平居中图像？
我有以下内容
<div class='column is-one-quarter has-text-centered'>
<div class='card equal-height'>
<div class='card-content'>
<figure class='image is-64x64'><img src='...'></figure>
</div>
</div>
</div>
而我无法使图像居中.我试图is-centered将这两个添加到图和父div,但没有任何变化.
谢谢.
sol*_*sol 17
使用修改器更改card-contentto 的显示属性.flex.is-flex
现在,您可以使用flexbox属性水平居中figure.Bulma没有修改类,所以你可以制作自己的......
.is-horizontal-center {
justify-content: center;
}
添加这个card-content,你就完成了.
.is-horizontal-center {
justify-content: center;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css" rel="stylesheet"/>
<div class='column is-one-quarter'>
<div class='card equal-height'>
<div class='card-content is-flex is-horizontal-center'>
<figure class='image is-64x64'><img src='https://unsplash.it/64'></figure>
</div>
</div>
</div>Mer*_*elm 17
将figure标签设为，inline-block然后分配has-text-centered给父标签。优点是不需要自定义代码。
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css" rel="stylesheet"/>
<div class='column is-one-quarter'>
<div class='card equal-height'>
<div class="card-image has-text-centered">
<figure class="image is-64x64 is-inline-block">
<img class="is-rounded" src="https://unsplash.it/64"/>
</figure>
</div>
<div class='card-content'>
<!-- other content here -->
</div>
</div>
</div>bui*_*pax 11
您还可以使用.level"布尔玛布局"部分中的元素.级别元素是Bulma用于辅助元素的特定垂直和水平居中的元素,例如图像和文本以外的东西.您可以在此处找到有关它的更多信息.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet" />
</head>
<body>
<div class='column is-one-quarter has-text-centered'>
<div class='card equal-height'>
<div class='card-content'>
<!-- Place image inside .level within your card element -->
<nav class="level">
<div class="level-item has-text-centered">
<figure class='image is-64x64'><img src='https://bulma.io/images/placeholders/128x128.png'></figure>
</div>
</nav>
<!-- And it'll be centered like so -->
</div>
</div>
</div>
</body>
</html>注意:为了使多个元素(例如图像和文本)水平居中并垂直居中,您所要做的就是将.level元素放在彼此之下:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet" />
</head>
<body>
<div class='column is-one-quarter has-text-centered'>
<div class='card equal-height'>
<div class='card-content'>
<!-- Place image inside .level within your card element -->
<nav class="level">
<div class="level-item has-text-centered">
<figure class='image is-64x64'><img src='https://bulma.io/images/placeholders/128x128.png'></figure>
</div>
</nav>
<nav class="level">
<div class="level-item has-text-centered">
<h1>Title to image</h1>
</div>
</nav>
<!-- And it'll be centered like so -->
</div>
</div>
</div>
</body>
</html>本地布尔玛解决方案：
<div class="columns is-flex is-centered">
<figure class="image is-128x128">
<img src="assets/images/logo.png" alt="logo">
</figure>
</div>
将您的代码放在 columns, is-flex and is-centered div