使用保证金：自动;不是以div为中心

时间：2016-11-06 00:37:37

标签： html css twitter-bootstrap css3 margin

Margin: auto;并未将此<div class="users">作为中心。

    .users {
        margin: auto;
    }
    
    .admin {
        margin: 5px;
        border-style: solid;
        border-width: 1px;
        border-color: grey;
        box-shadow: 2px 2px 1px grey;
        background: white;
        background: -webkit-linear-gradient(#fff , #F1F1F1);
        background: -o-linear-gradient(#fff , #F1F1F1);
        background: -moz-linear-gradient(#fff , #F1F1F1);
        background: linear-gradient(#fff , #F1F1F1);
    }
    
    .admin img {
        display: block;
        border-style: solid;
        border-width: 1px;
        border-color: grey;
        max-width: 100%;
        margin: auto;
        margin-top: 20px;
        margin-bottom: 20px;
        box-shadow: 2px 2px 1px grey;
    }
    
    .info {
        position: relative;
        background-color: #E0E0E0;
    }
    
    .info h1 {
        padding-top: 10px;
    }
    
    .info h3 {
        margin-top: 0px;
        padding-bottom: 10px;
    }
    
    .info h1, h3 {
        margin-left: 10px;
    }
        <div class="users">
        				<div class="aboutrow">
        					<div class="col-md-3 sub admin">
                                <img class=".image-responsive" src="images/pfpics/nord.jpg"></img>
        						<div class="info">
                                    <h1>User</h2>
                                    <h3>Info</h3>
                                </div>
        					</div>
                            
                            <div class="col-md-3 sub admin">
                                <img class=".image-responsive" src="images/pfpics/nord.jpg"></img>
        						<div class="info">
                                    <h1>User</h2>
                                    <h3>Info</h3>
                                </div>
        					</div>
                            
                            <div class="col-md-3 sub admin">
                                <img class=".image-responsive" src="images/pfpics/nord.jpg"></img>
        						<div class="info">
                                    <h1>User</h2>
                                    <h3>Info</h3>
                                </div>
        					</div>
                        </div>	
                        <div class="aboutrow">
                            <div class="col-md-3 sub admin">
                                <img class=".image-responsive" src="images/pfpics/nord.jpg"></img>
        						<div class="info">
                                    <h1>User</h2>
                                    <h3>Info</h3>
                                </div>
        					</div>
                        </div>
            </div>

我使用bootstrap制作这个网站，我不知道是不是搞乱了。 我尝试在左侧添加一个保证金百分比，但这对于移动屏幕来说并不是很好。

非常感谢帮助。谢谢！

9 个答案:

答案 0 :(得分：1)

对于居中，我们应该有width，然后使用margin:0 auto;

工作样本：https://jsfiddle.net/3xhn73ct/1/ 

.users {
  width:50%;
  margin:0 auto;
}

答案 1 :(得分：0)

默认情况下，div是block元素，因此默认宽度为100％。即使您将边距设置为auto，元素也不会居中，因为它已经占用了所有可用空间。

您可以明确地为元素指定宽度，也可以将其显示设置为inline-block，这样它只需要所需的空间，并将父级的text-align设置为center。

答案 2 :(得分：0)

您需要在.users上设置宽度，这将使整个div居中。 

var typeInfo = descriptor.ControllerTypeInfo;

如果你试图将.users的内容集中在一起，你将需要做这样的事情

.users{
  width:500px; /* for example */
  margin:0 auto;
}

此外，由于您使用的是bootstrap，因此您应该在包装div中添加.container类。这将为您提供页面边距。

答案 3 :(得分：0)

您需要将“position：relative”添加到：

.users {
    margin: 0 auto;
    position: relative;
}

这只适用于水平居中。

对于垂直居中，您需要添加

.users {
    margin: 0 auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

为此，.users的父元素需要具有定义的高度。

答案 4 :(得分：0)

不确定，如果你想要这样的东西

＆＃13;
＆＃13; 
.users {
  display: flex;
  width: 500px;
  justify-content: center;
  margin: auto;
}
.admin {
  margin: 5px;
  border-style: solid;
  border-width: 1px;
  border-color: grey;
  box-shadow: 2px 2px 1px grey;
  background: white;
  background: -webkit-linear-gradient(#fff, #F1F1F1);
  background: -o-linear-gradient(#fff, #F1F1F1);
  background: -moz-linear-gradient(#fff, #F1F1F1);
  background: linear-gradient(#fff, #F1F1F1);
}
.admin img {
  display: block;
  border-style: solid;
  border-width: 1px;
  border-color: grey;
  max-width: 100%;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  box-shadow: 2px 2px 1px grey;
}
.info {
  position: relative;
  background-color: #E0E0E0;
}
.info h1 {
  padding-top: 10px;
}
＆＃13; 
<div class="users">
  <div class="aboutrow">
    <div class="col-md-3 sub admin">
      <img class=".image-responsive" src="images/pfpics/nord.jpg"></img>
      <div class="info">
        <h1>User</h2>
                                    <h3>Info</h3>
                                </div>
        					</div>
                            
                            <div class="col-md-3 sub admin">
                                <img class=".image-responsive" src="images/pfpics/nord.jpg"></img>
        						<div class="info">
                                    <h1>User</h2>
                                    <h3>Info</h3>
                                </div>
        					</div>
                            
                            <div class="col-md-3 sub admin">
                                <img class=".image-responsive" src="images/pfpics/nord.jpg"></img>
        						<div class="info">
                                    <h1>User</h2>
                                    <h3>Info</h3>
                                </div>
        					</div>
                        </div>	
                        <div class="aboutrow">
                            <div class="col-md-3 sub admin">
                                <img class=".image-responsive" src="images/pfpics/nord.jpg"></img>
        						<div class="info">
                                    <h1>User</h2>
                                    <h3>Info</h3>
                                </div>
        					</div>
                        </div>
            </div>
＆＃13;
＆＃13;
＆＃13;

希望这有帮助

答案 5 :(得分：0)

为width CSS选择器添加.users属性，以便对该区域进行居中。

示例1：jsFiddle 

.users
{
    width:50%;
    margin:auto;
}

--- OR -

执行此操作的其他方法之一是：body table属性的宽度为div.users，而正文中的块为table cell为.users { display:table-cell; vertical-align: middle; } body { width:50%; display:table; margin:auto; }

示例2：jsFiddle 

        var oauth_token = "****";
        var oauth_token_secret = "****";
        var oauth_consumer_key = "****";
        var oauth_consumer_secret = "****";

        // oauth implementation details
        var oauth_version = "1.0";
        var oauth_signature_method = "HMAC-SHA1";

        // unique request details
        var oauth_nonce = Convert.ToBase64String(
            new ASCIIEncoding().GetBytes(DateTime.Now.Ticks.ToString()));
        var timeSpan = DateTime.UtcNow
            - new DateTime(1970, 1, 1, 0, 0, 0, 0, DateTimeKind.Utc);
        var oauth_timestamp = Convert.ToInt64(timeSpan.TotalSeconds).ToString();

        // message api details
        var status = "Updating status via REST API if this works";
        //var resource_url = "https://api.twitter.com/1.1/statuses/user_timeline.json";
        //var resource_url = "https://api.twitter.com/1.1/search/tweets.json";
       // var resource_url = "https://api.twitter.com/1.1/trends/place.json";
        var resource_url = "https://api.twitter.com/1.1/trends/available.json";
        //var screen_name = "screenname";
        var query = "india";
        var id = "1";
        // create oauth signature
        //var baseFormat = "oauth_consumer_key={0}&oauth_nonce={1}&oauth_signature_method={2}" +
                       // "&oauth_timestamp={3}&oauth_token={4}&oauth_version={5}&screen_name={6}";
        //var baseFormat = "oauth_consumer_key={0}&oauth_nonce={1}&oauth_signature_method={2}" +
            //"&oauth_timestamp={3}&oauth_token={4}&oauth_version={5}&q={6}";
        var baseFormat = "oauth_consumer_key={0}&oauth_nonce={1}&oauth_signature_method={2}" +
                        "&oauth_timestamp={3}&oauth_token={4}&oauth_version={5}&id={6}";

        var baseString = string.Format(baseFormat,
                                    oauth_consumer_key,
                                    oauth_nonce,
                                    oauth_signature_method,
                                    oauth_timestamp,
                                    oauth_token,
                                    oauth_version,
                                    id);

        baseString = string.Concat("GET&", Uri.EscapeDataString(resource_url), "&", Uri.EscapeDataString(baseString));

        var compositeKey = string.Concat(Uri.EscapeDataString(oauth_consumer_secret),
                                "&", Uri.EscapeDataString(oauth_token_secret));

        string oauth_signature;
        using (HMACSHA1 hasher = new HMACSHA1(ASCIIEncoding.ASCII.GetBytes(compositeKey)))
        {
            oauth_signature = Convert.ToBase64String(
                hasher.ComputeHash(ASCIIEncoding.ASCII.GetBytes(baseString)));
        }

        // create the request header
        var headerFormat = "OAuth oauth_nonce=\"{0}\", oauth_signature_method=\"{1}\", " +
                           "oauth_timestamp=\"{2}\", oauth_consumer_key=\"{3}\", " +
                           "oauth_token=\"{4}\", oauth_signature=\"{5}\", " +
                           "oauth_version=\"{6}\"";

        var authHeader = string.Format(headerFormat,
                                Uri.EscapeDataString(oauth_nonce),
                                Uri.EscapeDataString(oauth_signature_method),
                                Uri.EscapeDataString(oauth_timestamp),
                                Uri.EscapeDataString(oauth_consumer_key),
                                Uri.EscapeDataString(oauth_token),
                                Uri.EscapeDataString(oauth_signature),
                                Uri.EscapeDataString(oauth_version)
                        );


        // make the request

        ServicePointManager.Expect100Continue = false;

        //var postBody = "screen_name=" + Uri.EscapeDataString(screen_name);
        //var postBody = "q=" + Uri.EscapeDataString(query);
        var postBody = "id=" + Uri.EscapeDataString(id);
       // resource_url += "?" + postBody;
        HttpWebRequest request = (HttpWebRequest)WebRequest.Create(resource_url);
        request.Headers.Add("Authorization", authHeader);
        request.Method = "GET";
        request.ContentType = "application/x-www-form-urlencoded";


        WebResponse response = request.GetResponse();
        string responseData = new StreamReader(response.GetResponseStream()).ReadToEnd();
        Console.ReadLine();

这两者似乎也适用于移动屏幕（需要缩放一点）。

答案 6 :(得分：0)

好的，我修复它的方法是改变HTML和CSS

从<div class="col-md-3 sub admin">到<div class="col-sm-3 admin">我不完全确定这是否有所贡献，但是¯_（ツ）_ /¯

然后我将CSS更改为

.users {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: auto;

}

.admin {
    max-width: 410px;
    margin-left: 10px;
    margin-top: 5px;
    margin-bottom: 5px; 
    border-style: solid;
    border-width: 1px;
    border-color: grey;
    box-shadow: 2px 2px 1px grey;
    background: white;
    background: -webkit-linear-gradient(#fff , #F1F1F1);
    background: -o-linear-gradient(#fff , #F1F1F1);
    background: -moz-linear-gradient(#fff , #F1F1F1);
    background: linear-gradient(#fff , #F1F1F1);
}

唯一的问题是它在平板电脑大小的屏幕上看起来有点时髦，并且它不是完全集中。但是，它现在有效。

答案 7 :(得分：0)

如果你想使用margin: auto;来居中div，你需要明确给div一个“宽度”，最重要的是，如果你想看到它的工作，你必须要有宽度较小的而不是屏幕的宽度。

答案 8 :(得分：0)

使用以下，它将起作用：

.users

{
文本对齐：中心;

}

相关问题
最新问题