无法将中心与css对齐

Question

这应该是一件非常简单的事情。但不知怎么的，我没能成功！

如何将十六进制颜色选择器水平居中？

<template>
<div :onSelected="onSelected" :color="color" class="colorpickerBase">
<div class="colorpicker">
<hex-color-picker :color="color" @color-changed="handleColorChanged"></hex-color-picker>
</div>
<output>{{color}}</output>
</div>
</template>
<script setup lang="ts">
import {ref} from "vue"
import 'vanilla-colorful';
const props = defineProps({
onSelected : {
type : Function,
},
color : {
type : String,
}
})
const color = ref(props.color)
function handleColorChanged(event) {
color.value = event.target.color;
console.log("handleColorChanged",event.target.color,props.onSelected)
props.onSelected(color.value)
}
</script>
<style scoped>
output {
display: block;
margin-top: 10px;
font-size: 1.25rem;
text-align: center;
}
.colorpicker {
text-align: center;
background-color: gray;
width: 200px;
align-self: center;
align-content: center;
}
.colorpickerBase {
text-align: center;
background-color: white; 
padding: 20px;
margin: 20px;
}
</style>

尝试将每个参数设置为中心，但此代码仍然没有将十六进制颜色选择器与中心对齐。。设置align self等。甚至不会移动任何东西。

我该怎么做？？

Answer 1

您的.colorpicker类使用的是仅在Flex Layout中有效的align-self和align-content属性(例如：display: flex(。类似地，text-align属性仅对内联元素有效，如图像、文本或以其他方式设置"display:inline"的元素。

有很多方法可以将CSS中的元素居中。这在很大程度上取决于当前环境下的布局模式。在您的案例中，这是Flow布局[2]中的块元素[1]。

因为您正在将元素上的确定宽度设置为以bo为中心，所以您可以使用自动边距：

.colorpicker {
/* Sets 0 vertical margin, auto horizontal margin */
margin: 0 auto;
width: 200px;
}

这只是因为CSS可以确定元素的确切宽度。如果不能，那么它就不会起作用。

[1] ：它是块元素，因为它是div的默认类型。而内联是类似span的默认值。

[2] ：如果未指定其他内容，则流布局是CSS使用的默认算法。