Question

我喜欢在屏幕上使用标题背景全宽而不使用：宽度：100vw;

因此，整个屏幕背景应为100％全宽，投资组合h2标签应保持居中 http://ampersandmiami.com/new/portfolio/

投资组合页面使用名为投资组合模板的模板，这是代码：

＆＃13;

<?php
/*
Template Name: Portfolio
*/
?>

<?php get_header(); ?>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div id="heading1" class="fullwidth">
    <h2>Portfolio</h2>
</div>

<!-- / #welcome -->

<?php if (option::get('portfolio_tags') == 'on') { ?>
	<div class="portfolio-tags">
	    <ul class="portfolio-taxonomies portfolio-taxonomies-filter-by">
	        <li class="cat-item cat-item-all current-cat"><a href="#"><?php _e('All', 'wpzoom'); ?></a></li>
	        <?php wp_list_categories( array( 'title_li' => '', 'hierarchical' => true,  'taxonomy' => 'skill-type', 'depth' => 1 ) ); ?>
	    </ul>
    </div>
<?php } ?>

<?php endwhile; endif; ?>

<div class="clear"></div>

<div id="portfolio">

	<section id="main" class="portfolio-main" role="main">

	    <ul class="portfolio-grid clearfix">

	        <?php
	        global $wp_query;
	        global $paged;

	        wp_reset_query();
	        $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

	        $args = array(
	            'post_type' => 'portfolio',
	            'paged' => $paged,
	            'posts_per_page' => 99,
	            );

	        $wp_query = new WP_Query($args);

	        while ( $wp_query->have_posts() ) : $wp_query->the_post();
	            ?>

	           <?php get_template_part('loop-portfolio'); ?>

	        <?php endwhile;  ?>

	    </ul>

	    <?php wp_reset_query(); ?>

	</section><!-- /#main -->


</div><!-- / #portfolio -->

<div class="clear"></div>

<?php get_footer(); ?>

＆＃13;

如何让它从917px宽度容器中取出，但保持h2标签居中？

Answer 1

您可以稍微重新构建HTML，以使其更容易。

<强> HTML ：

<h2 id="heading1" class="fullwidth">
    <?php the_title(); ?>
</h2>

<强> CSS ：

.fullwidth {
    width: 100%;
    display: block;
    text-align: center;
}

Answer 2

.fullwidth {
    width: auto;
    display: block;
    text-align: center;
}

你可以试试这个。

Answer 3

您可以在<div id="main">

之前加上 DIV

您也可以将css应用为：

.fullwidth {display: flex;justify-content: center;align-items: center;}

Answer 4

您需要按以下步骤更新CSS

div#heading1 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 100vw;
    background: url(http://ampersandmiami.com/wp-content/themes/vimes-amp-child/images/pattern-feature.gif) repeat 0 0;
    border-bottom: 3px solid #3d7576;
    height: 85px;
    left: 0;
}

.portfolio-tags {
    padding-top: 95px;
    margin: 0 0px 25px;
    text-transform: uppercase;
}

或者您可以将heading1 div移到main和

之外

div#heading1 {
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(http://ampersandmiami.com/wp-content/themes/vimes-amp-child/images/pattern-feature.gif) repeat 0 0;
    border-bottom: 3px solid #3d7576;
    height: 85px;
}

Answer 5

.fullwidth h2{

    text-align: center;
    line-height: 85px;   //for centered vertically

}

行高应与全宽的高度相同

Answer 6

您的问题是 #main div的宽度限制为917px，因此：

<div id="main">

    <div id="heading1" class="fullwidth">
        <h2>Portfolio</h2>
    </div>

^这意味着您的＃heading1 div，即使是100％，也不会超过 #main 的宽度。

您可以通过在 #main 之外移动＃heading1 并调整CSS来解决此问题：

的 HTML

<div id="heading1" class="fullwidth"> <h2>Portfolio</h2> </div> <div id="main">

的 CSS

我已将相对定位和 z-index 添加到 div＃header ，否则为'＆amp;'的底部标题中的图像落后于＃heading1

div#header { display: block; position: relative; /* '&' image fix here ... */ box-sizing: border-box; width: 100%; padding-left: 21%; padding-right: 10%; z-index: 200; /* ... and here */ } #heading1 { display: block; position: relative; width: 100%; height: 85px; padding: 0px; margin: 0px; background: url('http://ampersandmiami.com/wp-content/themes/vimes-amp-child/images/pattern-feature.gif') repeat 0 0; border-bottom: 3px solid #3d7576; } #heading1 > h2 { display: block; max-width: 917px; /* this makes the h2 the same width as #main ... */ padding: 0.5em; margin: 0px auto 0px auto; /* ... with the same margins ... */ text-align: center; /* ... and centres the text */ }

这应该给你这样的东西：

Answer 7

你可以使标题背景绝对定位，然后将左侧设置为0，如： -

div#heading1 {
background: url(http://ampersandmiami.com/wp-content/themes/vimes-amp-child/images/pattern-feature.gif) repeat 0 0;
border-bottom: 3px solid #3d7576;
height: 85px;
position: absolute;
width: 100%;
left: 0;
text-align: center;
padding-top: 20%;
}

然后你必须增加portfoilio标签上的填充，如： -

.portfolio-tags {
margin: 12px 0px 25px;
text-transform: uppercase;
padding-top: 24em;
}

在屏幕上显示div全宽

7 个答案: