Html: Css: Center body content div horizontally

Question

I have a Layout page with a left side menu show up when a user logs in. I set the margin-left of the body content to the width of the side menu + 50 px. WHen the user logs out, the home page that's displayed needs to be centered, but is not(because of the margin-left from above). How do I center the home page when the user is not logged in, but keep the margin-left when logged in. If I set the body-content's margin to "0 auto", when the user logs in and the left side menu is shown, the body content slides underneath the menu when the window is made smaller. My code:

Layout.cshtml:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@msg</title>
</head>

<body onload="UpdateYear()">
<div>
    @{ await Html.RenderPartialAsync("_NavPartial_top_menu"); }
</div>
<div>
    @{ await Html.RenderPartialAsync("_NavPartial_side_menu"); }
</div>    
<div class="container body-content">
    <!--<div class="container body-content" style="margin:0 auto;">-->
    
        <div style="margin-top:-60px">
            <h1 class="text-primary">@ViewData["Title"]</h1>
        </div>
        @if (ViewData["Title"] != null)
        {<hr />}
        @RenderBody()
    <div id="footer" class="container-fluid">
        <div class="navbar navbar-inverse navbar-fixed-bottom">                
            <h4 class="text-center text-primary">Copyright &copy; <label id="CopyYear" style="font-weight:normal">2019</label> ABC, Inc.</h4>
        </div>
    </div>
</div>

SoftwareDveloper SoftwareDveloper · Accepted Answer · 2020-11-04T19:27:43

I ended up extracting the controller name and based on that value, I am displaying the body content.

var controllerName = ViewContext.RouteData.Values["controller"].ToString();

@if(controllerName.ToLower() == "home"){
    <div class="container body-content" style="margin:0 auto;">    
    <div style="margin-top:-60px">
        <h1 class="text-primary">@ViewData["Title"]</h1>
    </div>
    @if (ViewData["Title"] != null)
    {<hr />}
    @RenderBody()
    <div id="footer" class="container-fluid">
        <div class="navbar navbar-inverse navbar-fixed-bottom">                
            <h4 class="text-center text-primary">Copyright &copy; <label id="CopyYear" style="font-weight:normal">2019</label> ABC, Inc.</h4>
        </div>
    </div>
</div>
} else {
<div class="container body-content" >

    <div style="margin-top:-60px">
        <h1 class="text-primary">@ViewData["Title"]</h1>
    </div>
    @if (ViewData["Title"] != null)
    {<hr />}
    @RenderBody()
    <div id="footer" class="container-fluid">
        <div class="navbar navbar-inverse navbar-fixed-bottom">                
            <h4 class="text-center text-primary">Copyright &copy; <label id="CopyYear" style="font-weight:normal">2019</label> ABC, Inc.</h4>
        </div>
    </div>
</div>
}

Html: Css: Center body content div horizontally

1 Answers