cuốn sách gpt4 ai đã làm

css - 形式:垂直居中

In lại Tác giả: Walker 123 更新时间:2023-11-28 13:14:18 26 4
mua khóa gpt4 Nike

在当前的元素中,我在表单中遇到了一个问题。表单中标签的字体大小可能大于默认值。如果我把它举起来,那么右边的输入必须垂直居中。

我查看了 Bootstrap 和 Foundation,但都没有解决这个问题的方法。








.m-form {
ol {
kiểu danh sách: không có;
lề: 0;
phần đệm: 0;
}
label:first-child {
kích thước hộp: hộp viền;
hiển thị: khối;
nổi: trái;
padding: .25em 2em .25em 0;
chiều rộng: 50%;

độ dày phông chữ: đậm;
line-height: 1.5;
text-align: right;
}
.m-form__textfield {
kích thước hộp: hộp viền;
nổi: trái;
padding: .5em;
chiều rộng: 50%;

border: 1px solid #ccc;
border-radius: 3px;
}
}

Thử nghiệm: http://jsfiddle.net/qSNH5/1/

你有一个简单的解决方案吗?

câu trả lời hay nhất

使用垂直对齐属性

我对您的 CSS 做了一些更改:

label:first-child {
kích thước hộp: hộp viền;
hiển thị: khối nội tuyến;
căn dọc: giữa;
padding: .25em 2em .25em 0;
chiều rộng: 40%;
độ dày phông chữ: đậm;
line-height: 1.5;
text-align: right;
}
.m-form__textfield {
kích thước hộp: hộp viền;
hiển thị: khối nội tuyến;
căn dọc: giữa;
padding: .5em;
chiều rộng: 50%;
border: 1px solid #ccc;
border-radius: 3px;
}

Hãy thử sử dụng display: inline-block 代替 float 元素,然后应用 vertical-align: middle tài sản.

请注意 % 宽度,因为 50% 的值可能会导致元素环绕到第二行,具体取决于其他因素,例如填充、边距、边框等。

Thử nghiệm:http://jsfiddle.net/audetwebdesign/AhZFm/

关于css - 形式:垂直居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18104550/

26 4 0
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress