Question

所以我的页面的主体每边都有一些空白区域，我希望我的标题标识在左边对齐，这样无论窗口的大小是多少，它都会垂直从身体的同一个地方开始确实。我无法弄清楚如何因为身体居中，但有一个百分比宽度，而我的标题徽标本身在中间，并将其浮动到左边并添加边距/填充（无论是百分比还是像素）没有比我的笔记本电脑响应更大的屏幕。

我的容器的css是：

.td-container {
    width: 95%;
    max-width: 1350px;
    margin-right: auto;
    margin-left: auto;
}

到目前为止，对于我的标题，我试过了：

.td-main-logo img {
    max-width: 1350px;
    margin-right: auto;
    margin-left: auto;
}

和

.td-main-logo img {
    max-width: 1350px;
    margin-left: 6%;
}

Answer 1

身体标签周围有边距。尝试将其重置为“隐藏”空白区域。

CSS

CREATE PROC dbo.OneRowProc
(
    @Id DECIMAL(15,0)
)
AS BEGIN

    SELECT * 
    into #NameValuePair
    from NameValueTableFunction(@Id)

    DECLARE @Sql VARCHAR(MAX) = 'SELECT '
    UPDATE  #NameValuePair
    SET     @Sql = @Sql + '''' + Value + ''' AS [' + Name + '],'

    SET     @Sql = SUBSTRING(@Sql, 1, LEN(@Sql) - 1)
    EXEC    (@Sql)

END
GO

提示，

margin-left：auto 和 margin-right：auto 与 margin：auto
尝试使用 box-sizing：border-box padding （https://www.google.cz/search?q=box-sizing%20css）

实况示例： http://codepen.io/anon/pen/oBMBax

（您没有提供更多信息）

Answer 2

这个怎么样？我已将宽度更改为600px仅用于演示目的（与轮廓相同）

＆＃13;

.td-main-logo,
.td-container {
    width: 95%;
    max-width: 600px;
    margin-right: auto;
    margin-left: auto;
}

.td-container,
.td-main-logo{
  outline: 1px solid red;
}

＆＃13;

<div class="td-main-logo">
<img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png" width="100px">
</div>

<div class="td-container">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt nihil consequuntur, quasi dicta officiis distinctio, aliquid soluta provident tempore magni temporibus autem, facilis voluptatum ab blanditiis fuga tempora vel tenetur officia voluptate. Quaerat dolor magnam, dolore sint id ducimus ea optio rem nobis doloremque quam animi quidem veritatis assumenda commodi, ratione aspernatur. Ad nemo eos at quis quos saepe numquam, tempora blanditiis minus, pariatur soluta unde dolorem aut beatae esse nam, accusamus dolore rerum quam necessitatibus aspernatur explicabo doloremque. Quae rem error quia facilis deleniti asperiores excepturi numquam illum quo. Eius cupiditate laudantium molestiae ex ipsam perspiciatis, nam! Beatae tempora iure aliquid accusamus illum, adipisci? Ducimus praesentium commodi, aspernatur debitis voluptate omnis nemo quia illo magnam quis voluptates, ullam laborum tenetur dolorum ut. Molestias ex quas ea, excepturi praesentium error, natus ut quaerat porro, tenetur dolorum eaque exercitationem hic officiis repellat est suscipit dolor dolore velit. Doloribus rerum porro deserunt.
</div>

＆＃13;

`

标题徽标与身体对齐

2 个答案: