html - 无法在 CSS 左侧对齐文本

标签 html css alignment

两个框中的文本需要左对齐。但是,即使我在 CSS 代码中将“center”更改为“left”,也没有什么不同。 JSFiddle

    @charset "utf-8";

.box
{
    width: 560px;
    background-color:#CCC;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    color:#000;
    text-align:center;
    border: 1px solid #000;
    margin-right:auto;
    margin-left:auto;
    margin-top:15px;
    font-size:24px;
}
.boxbot
{
    width: 560px;
    background-color:#CCC;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    text-align:center;
    border: 1px solid #000;
    margin-right:auto;
    margin-left:auto;
    margin-top:3px;
    font-size:16px;
}
.boxyoutube
{
    width: 560px;
    height: 345px;
    background-color:#CCC;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    text-align:center;
    border: 1px solid #000;
    margin-right:auto;
    margin-left:auto;
    margin-top:3px;
    font-size:16px;
}
.boxbot2
{
    width: 560px;
    background-color:#CCC;
    text-align:center;
    border: 1px solid #000;
    margin-right:auto;
    margin-left:auto;
    margin-top:3px;
    font-size:16px;
}
.submit
{
    width: 560px;
    background-color:#CCC;
    text-align:left;
    border: 1px solid #000;
    margin-right:auto;
    margin-left:auto;
    margin-top:3px;
    font-size:16px;
}
body
{
    alignment-adjust:central;
    background-color:#CCC;
}
select{
    width:auto;}
#wrapper
{
    text-align:center;
}

最佳答案

您需要从这两个类 #wrapper.boxbot2 中删除对齐方式

#wrapper
{
    text-align:center; -- remove it
}

.boxbot2
{
    width: 560px;
    background-color:#CCC;
    text-align:center;  -- remove it
    border: 1px solid #000;
    margin-right:auto;
    margin-left:auto;
    margin-top:3px;
    font-size:16px;
}

Js Fiddle Demo

关于html - 无法在 CSS 左侧对齐文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21515071/

相关文章:

list - SwiftUI 中列表的左对齐或居中对齐多行节标题

html - 如何在全宽容器内将导航栏的元素居中?

javascript - 使用 Javascript 的简单国际象棋棋盘

javascript - 自动文本来回弹跳 CSS,如长文本标签的选取框

html - css 样式被否决 bij chrome 用户代理样式表

javascript - 如何使用 Bootstrap 指标作为滑动图像

html - CSS中简单按钮的对齐方式

html - 水平和垂直居中的响应图像

javascript - 影子 DOM 不显示内容。如何使内容在 DOM 中可见?

javascript - 如何更改 HTML 元素并重定向到另一个页面