I want to achieve the following effect: there is an icon before and after a listitem, and the middle text is displayed in the center, but now I can"t center vertically. I"ve been doing it for a long time, and I"m confused. Ask for help. Please modify the style of the .business _ name class. The
code is as follows:
<template>
<div id="business_item_container">
<div class="start_icon">
<img class="icon_img" src="@/assets/logo.png"/>
</div>
<div class="item_name">
<p class="business_name">align center
</div>
<div class="end_icon">
<img class="icon_img" src="@/assets/logo.png"/>
</div>
</div>
</template>
<script>
export default {
name: "BusinessItem",
props: ["itemName"],
methods: {
onBusinessItemClick() {
window.console.log("clicked!");
}
}
}
</script>
<style scoped>
-sharpbusiness_item_container {
height: 100px;
margin: 10px 4px 4px 4px;
padding: 10px;
border-radius: 4px !important;
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3) !important;
text-align: center;
}
.start_icon {
position: relative;
display: inline-block;
height: 100%;
width: 40px;
background-color: red;
}
.item_name {
position: relative;
display: inline-block;
height: 100%;
width: calc(100% - 2 * 40px);
background-color: green;
}
.business_name {
width: 100%;
height: 20px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: yellow;
}
.end_icon {
position: relative;
display: inline-block;
height: 100%;
width: 40px;
background-color: red;
}
.icon_img {
width: 30px;
height: 30px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style> effect is as follows:
the yellow paragraph is not vertically centered in the parent container (green block).
