我正在尝试实现此[在此处输入图像描述] [1]
[1]:(https://i.stack.imgur.com/4ZOBB.jpg),我设法使它在PC上运行,但在移动设备上看起来不一样。到目前为止,我已经在这里创建了代码。盒子的高度应小于图像的高度。我已经尝试过display:table
,但它也无法正常工作。请帮忙。谢谢。
body {
font-family: 'Abel', sans-serif;
}
.content-wrapper {
min-height: 100vh;
background-color: #d9dde2;
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3);
background: #fff;
}
::-webkit-scrollbar-thumb {
background: #f89b0f;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: #f89b0f;
}
a {
color: #f39c12;
}
.content-header>.breadcrumb {
background: #f89b0f;
right: 25px;
border-radius: 25px;
color: #fff;
padding: 10px;
}
.modal-dialog {
z-index: 1200;
}
.solid-header-default {
background: #f0f0f0;
}
.solid-header-success {
background: #00a65a;
}
h2 {
font-size: 18px;
}
.gcircle {
height: 50px;
width: 50px;
background-color: #938005;
border-radius: 50%;
display: inline-block;
}
.circle-block {
text-align: center;
vertical-align: middle;
}
.circle {
background: #938005;
border-radius: 50%;
color: black;
display: inline-block;
height: 50px;
font-weight: bold;
font-size: 1.2em;
width: 50px;
margin: 0 auto;
}
.circle span {
display: table-cell;
vertical-align: middle;
height: 50px;
width: 50px;
text-align: center;
padding: 0 15px;
}
.c-chart {
display: inline-block;
vertical-align: top;
padding: 5px;
}
.brandlogo-image {
float: left;
line-height: .8;
margin-left: .8rem;
margin-right: .5rem;
margin-top: -6px;
max-height: 34px;
width: auto;
}
.dashboard-box {
max-width: 400px;
min-width: 150px;
background-color: #C43805 !important;
border-radius: 15px;
margin-left: 60px;
min-height: 50px;
max-height: 80px;
display: flex;
align-items: center;
}
.dash-img {
vertical-align: middle;
}
.inner {
display: inline-block;
}
<div class="dashboard-box" >
<img src="http://phiz.live/portal/assets/theme/img/c1.png" alt="Phiz.Live" style="margin-left:-70px;width:35%;" class="dash-img">
</div>
您可以使用Flexbox。您想居中的位置位于.center1
和.center2
div中。欲获得更多信息。 https://www.w3schools.com/css/css_align.asp
.dashboard-box {
max-width: 400px;
min-width: 150px;
background-color: #C43805 !important;
border-radius: 15px;
margin-left: 60px;
min-height: 50px;
max-height: 80px;
display: flex;
align-items: center;
}
.dash-img {
vertical-align: middle;
}
.center1 {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 500px;
background: steelblue;
}
.center2 {
width: 100%;
}
<div class="center1" >
<div class="center2">
<div class="dashboard-box" >
<img src="http://phiz.live/portal/assets/theme/img/c1.png" alt="Phiz.Live" style="margin-left:-70px;width:35%;" class="dash-img">
</div>
</div>
</div>
[我想它按照您想要的方式工作:JSfiddle link,但我将图像的margin-left
更改为-30px
,将margin-left: 30px;
的更改为.dashboard-box
。也许它可以帮助您。
HTML
<div class="wrapper">
<div class="dashboard-box" >
<img src="http://phiz.live/portal/assets/theme/img/c1.png" alt="Phiz.Live" style="margin-left:-30px;width:35%;" class="dash-img">
</div>
</div>
CSS
.wrapper {
height: 20vh;
display: flex;
align-items: center;
}
.dashboard-box {
max-width: 400px;
min-width: 150px;
background-color: #C43805 !important;
border-radius: 15px;
margin-left: 30px;
min-height: 50px;
max-height: 80px;
display: flex;
align-items: center;
}