Question

我正在尝试使用@media查询，一切都运行正常，除了id，以便在调用@media查询时让文本以margin：center为中心。我尝试过很多东西。我最初有浮动：留在#masterhead＃header-text {}但是我已将其改为显示：inline-block; （我已经读过，这对很多人来说都是一个解决方案）。我试过明确设置widths ..和display：block;

<div id="masterhead">
    <div id="header-bg">
        <div class="container">
            <div id="header-text">
                <a href="https://www.google.com">
                    <h3>Thin Title</h3>
                    <h1>Title</h1>
                </a>
            </div>
            <div class="logo">
                <a href="https://www.google.com"><img src="~/Content/images/stacked.png" /></a>
            </div>              
        </div>
    </div>
</div>


#masterhead #header-text{
display:inline-block;
font-family: Arial, Helvetica, sans-serif;
}

#masterhead h1{
margin-top:0;   
font-weight: 600;
}

#masterhead h3{
padding-top:15px;
}


@media only screen and (max-width: 479px) {
    #masterhead #header-text { margin:auto; }
    #masterhead h1 {font-size:30px; margin:auto;}
    #masterhead h3 {font-size:20px; margin:auto;}
}

Answer 1

默认情况下，您的h1和h3元素是块级元素。这意味着它们将占据宽度的100％，因此margin:auto;无效。您可以更改其显示属性或设置显式宽度，但更容易在容器/包装元素上使用text-align: center;和width: 100%;。

例如：

#masterhead #header-text {
    width: 100%;
    text-align: center;
}

＆＃13;

#masterhead #header-text{
font-family: Arial, Helvetica, sans-serif;
}

#masterhead h1{
margin-top:0;   
font-weight: 600;
}

#masterhead h3{
padding-top:15px;
}


@media only screen and (max-width: 479px) {
    #masterhead #header-text { width: 100%; text-align: center;}
    #masterhead h1 {font-size:30px; }
    #masterhead h3 {font-size:20px; }
}

＆＃13;

<div id="masterhead">
    <div id="header-bg">
        <div class="container">
            <div id="header-text">
                <a href="https://www.google.com">
                    <h3>Thin Title</h3>
                    <h1>Title</h1>
                </a>
            </div>
            <div class="logo">
                <a href="https://www.google.com"><img src="~/Content/images/stacked.png" /></a>
            </div>              
        </div>
    </div>
</div>

＆＃13;

有关更方便的居中提示，请参阅this article。

修改

要回答您的评论...即使您不希望文本居中，只要将其重置为{{1}，您仍然可以在内联块包装器div上使用text-align: center;为了孩子们。

例如：

＆＃13;
＆＃13;
text-align: left;
＆＃13;
#masterhead #header-text { float: left; font-family: Arial, Helvetica, sans-serif; } #masterhead h1 { margin-top: 0; font-weight: 600; } #masterhead h3 { padding-top: 15px; } #masterhead br { display: none; } @media only screen and (max-width: 479px) { #masterhead #header-text { float: none; text-align: center; } #masterhead #header-text a { display: inline-block; text-align: left; } #masterhead h1 { font-size: 30px; } #masterhead h3 { font-size: 20px; } }
＆＃13;
＆＃13;
＆＃13;

请注意，您必须删除<div id="masterhead"> <div id="header-bg"> <div class="container"> <div id="header-text"> <a href="https://www.google.com"> <h3>Thin Title</h3> <h1>Title</h1> </a> </div> <div class="logo"> <a href="https://www.google.com"><img src="~/Content/images/stacked.png" /></a> </div> </div> </div> </div>才能生效。如果您的目标是将文字浮动到徽标旁边，那么您很可能必须以父float: left; div为中心。

Answer 2

您应该将<script src="~/Scripts/jquery.signalR-2.2.0.min.js"></script>  <script src="~/signalr/hubs"></script>  <script> $(function () { var currentMember = '@Html.Raw(@ViewBag.Name)'; // Reference the auto-generated proxy for the hub. var chat = $.connection.chatHub; // Create a function that the hub can call back to display messages. chat.client.addNewMessageToPage = function (name, message) { // Add the message to the page. $('#discussion').append('<li><strong>' + htmlEncode(name) + '</strong>: ' + htmlEncode(message) + '</li>'); }; // Get the user name and store it to prepend to messages. $('#displayname').val(currentMember); // Set initial focus to message input box. $('#message').focus(); // Start the connection. $.connection.hub.start().done(function () { $('#sendmessage').click(function () { // Call the Send method on the hub. chat.server.send($('#displayname').val(), $('#message').val()); // Clear text box and reset focus for next comment. $('#message').val('').focus(); }); }); }); // This optional function html-encodes messages for display in the page. function htmlEncode(value) { var encodedValue = $('<div />').text(value).html(); return encodedValue; } </script>改为#header-text而不是display:block，因为display:inline-block涵盖了全宽。

并将宽度设为inline-block。

<强> Fiddle

或

如果您不想给出固定宽度，请将#header-text提供给父div。

text-align:center

<强> Fiddle

Div / Text不以margin为中心：auto

2 个答案: