logo
down
shadow

How do I center specific content without affecting the rest?


How do I center specific content without affecting the rest?

By : user2951095
Date : November 18 2020, 01:01 AM
With these it helps I'm very new to programming but so far I'm addicted to it! I've looked on this site before posting my own question. I have found part of what I looked for but after trying few codes around, it didn't work so I thought about breaking the ice and asking for help! , I think your problem is from the body.
Try this:
code :
body {
  padding:0;
  margin:0;
}
<body style="margin:0; padding:0"> 
   (all your stuff here) 
</body>


Share : facebook icon twitter icon
Expand div to fill rest of browser window and center content

Expand div to fill rest of browser window and center content


By : Kile Sanderly
Date : March 29 2020, 07:55 AM
should help you out Here is one solution, for a header with a fixed height.
Your HTML needs to have the following pattern:
code :
<div class="header">Header</div>
<div class="main-wrap">
    <div class="container">
        <div class="content">Content...</div>
    </div>
</div>
<div class="footer">Footer</div>
html, body {
    height: 100%;
}
body {
    margin: 0;
}
.header {
    height: 50px;
    background-color: beige;
}
.main-wrap {
    position: absolute;
    top: 50px;
    bottom: 50px;
    width: 100%;
    background-color: silver;
    overflow: auto;
}
.container {
    display: table;
    height: 100%;
    width: 100%;
}
.content {
    border: 1px solid blue;
    display: table-cell;
    height: 100%;
    width: 100%;
    vertical-align: middle;
}
.footer {
    height: 50px;
    width: 100%;
    background-color: lightblue;
    position: fixed;
    bottom: 0;
}
How do I center specific content?

How do I center specific content?


By : choosepage
Date : March 29 2020, 07:55 AM
it helps some times I've got a slideshow with 2 pictures and a text under it. I just want to center it in the middle of my header. For some reason I'm struggling.
code :
 .main {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   margin-top: 60px;
   /* Add a top margin to avoid content overlay */
 }
Center content vertically only on specific resolution

Center content vertically only on specific resolution


By : Fred McMurray
Date : March 29 2020, 07:55 AM
Hope that helps Bootstrap has built-in class for this purpose
You may use them on body
code :
<body class="m-0 d-flex flex-column justify-content-between h-100">
/* reset.css */

/* reset.css */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, button {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,blockquote:after,q:before,q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

html {
  height: 100%;
}

body {
  height: 100%;
  background-color: #fff;
  font-family: 'Roboto', sans-serif;
  overflow-x: hidden;
}

hr {
  border-bottom: 1px solid #fff;
}


/*header.ejs*/

.btn-home {
  font-weight: bold;
}

.btn-home:hover {
  color: #f18a01;
  background-color: #fff;
}

.tear {
  font-size: 5rem;
}

.face-404 {
  margin-bottom: 0.75rem;
}

.vertical-center {
  margin: 0 !important;
  height: 100vh;
  width: 100%;
  text-align: center;
  /* align the inline(-block) elements horizontally */
  font: 0/0 a;
  /* remove the gap between inline(-block) elements */
  background-color: #f18a01;
  color: #fff;
}

.vertical-center:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.container {
  max-width: 100%;
  display: inline-block;
  vertical-align: middle;
  /* vertical alignment of the inline element */
  /* reset the font property */
  font: 0.5rem/1 "Alegreya Sans";
  font-weight: bold !important;
}

.container-404 {
  height: 100%;
  background-image: url("img/404.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}


/*home.ejs*/

.shrink {
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;
  margin-left: -1rem;
  border-bottom: 3.5px solid orange !important;
  -webkit-animation: swing 1s ease;
  animation: swing 1s ease;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

.border {
  border-bottom: 3.5px solid orange !important;
}

.logo {
  width: 10rem;
}

.bg-orange {
  background-color: #F28A00;
  color: #fff;
}

.ml-1>span {
  font-size: 0.8rem;
}

.ml-1>i {
  font-size: 1.1rem;
}

.bara-mica-text {
  font-size: 0.8rem;
  letter-spacing: 0.25px;
}

.margin-top-bot {
  margin: 0.2rem 0;
}

.margin-top-bot>span>a {
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  font-size: 0.8rem;
  transition: 0.25s;
}

.margin-top-bot>span>a:hover {
  color: #ADADAD;
}

.nav-item>a {
  transition: 0.4s;
  font-weight: 700;
}

.nav-item>a:hover {
  color: #F28A00 !important;
}

.logos-top {
  height: 5rem;
}

.home-intro {
  background-image: url("../img/home-div-bg.jpg");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.container-home {
  padding: 15rem 0rem 27.5rem 0rem;
}

.slogan-home {
  color: #F28A00;
}

.welcome-home {
  font-size: 4.5rem;
  line-height: 4.5rem;
}

.btn1-home-custom {
  color: #fff;
  background-color: #F28A00;
  outline: none;
  border-color: #F28A00;
  border-radius: 30px;
  height: 3rem;
  width: 12rem;
  text-transform: uppercase;
  font-weight: bold;
}

.btn2-home-custom {
  color: #F28A00;
  background-color: #fff;
  border-color: #fff;
  border-radius: 30px;
  text-transform: uppercase;
  font-weight: bold;
  width: 12rem;
}

.btn1-home-custom:hover,.btn2-home-custom:hover {
  color: #fff;
  background-color: #212529;
  outline: none;
  border-color: #F28A00;
}

.btn:focus,.btn:active {
  outline: none !important;
  box-shadow: none;
}

.container-home-butoane-intro {
  margin-top: 2.5rem;
  margin-left: 2rem;
}

.home-intro-2 {
  background-image: url("../img/home2-div-bg.jpg");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  color: #fff;
}

.home-intro-2:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, .75);
}

.home-intro-2>.row {
  padding: 4.5rem 0;
}

.home-intro-2>.row>.col-md-6>.display-4 {
  text-align: right;
  font-weight: bold;
  padding-right: 0.75rem;
  border-right: 2px solid #fff;
}

.home-intro-2>.row>.col-md-6>.lead {
  text-align: left;
  width: 75%;
  margin-top: 0.25rem;
}

.home-intro-2>.row>.col-md-6>i {
  margin-left: 0.75rem;
}

.home-intro-2>.row>.col-md-6>i>a {
  margin-left: 0.5rem;
  text-decoration: none;
  color: #fff;
  font-family: "Roboto";
  font-weight: bold;
}

.home-suntem>.container>.row>.display-4 {
  padding-top: 2rem;
  text-align: center;
  color: #F28A00;
  font-weight: bold;
}

.home-cine-suntem {
  text-align: center;
  padding: 2rem;
}

.home-cine-suntem>a {
  display: inline-block;
  padding-bottom: 1rem;
  text-decoration: none;
  color: orange;
  font-size: 1rem;
  font-family: "Roboto";
  font-weight: bold;
}

.home-sustinem>.container>.row>.display-4 {
  text-align: center;
  font-weight: bold;
  padding-top: 2rem;
}

.home-sustinem>.container {
  background-color: #252525;
  color: #fff;
}

.home-articole>.container>.row>.display-4 {
  text-align: center;
  font-weight: bold;
  padding-top: 2rem;
  color: #fff;
}

.home-articole>.container {
  background-color: #252525;
  color: #585858;
}

.home-articole>.container>.row>.col-md-3 {
  margin: 1rem 0;
}

.home-articole>.container>.row>.col-md-3>.home-articol {
  border: 2px solid #585858;
  text-align: center;
}

.home-articole>.container>.row>.col-md-3>.home-articol>.lead {
  padding: 0 1rem;
  color: #585858;
}

.home-articole>.container>.row>.col-md-3>.home-articol>h5 {
  padding: 1rem 0;
  font-weight: bold;
}

.home-articole>.container>.row {
  margin-bottom: 2rem;
}

.home-articole>.container>.row>.col-md-3>.home-articol>a {
  display: inline-block;
  padding-bottom: 1rem;
  text-decoration: none;
  color: #585858;
  font-size: 1rem;
  font-family: "Roboto";
  font-weight: bold;
}

.home-articole>.container {
  margin-bottom: 2rem;
}

.home-cum-sustinem {
  text-align: center;
  color: #585858;
  padding: 2rem;
}

.home-cum-sustinem>a {
  display: inline-block;
  padding-bottom: 1rem;
  text-decoration: none;
  font-size: 1rem;
  font-family: "Roboto";
  font-weight: bold;
  color: #585858;
}

.home-services>.container>.row>.display-4 {
  padding-top: 2rem;
  text-align: center;
  color: #F28A00;
  font-weight: bold;
}

.home-services>.container>.row>.col-md-3 {
  margin: 1rem 0;
}

.home-services>.container>.row>.col-md-3>.home-service {
  border: 2px solid #F28A00;
  text-align: center;
}

.home-services>.container>.row>.col-md-3>.home-service>.lead {
  padding: 0 1rem;
}

.home-services>.container>.row>.col-md-3>.home-service>h1 {
  padding: 1rem 0;
  font-weight: bold;
}

.home-services>.container>.row>.col-md-3>.home-service>a {
  display: inline-block;
  padding-bottom: 1rem;
  text-decoration: none;
  color: orange;
  font-size: 1rem;
  font-family: "Roboto";
  font-weight: bold;
}

.home-services>.container {
  margin-bottom: 2rem;
}

.home-echipa>.container {
  background-color: #252525;
  color: #fff;
}

.eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.home-echipa>.container>.row>.display-4 {
  text-align: center;
  font-weight: bold;
  padding: 2rem 0 2.5rem 0;
}

.home-echipa>.container>.row>.home-echipa-functie {
  font-size: 1.3rem;
}

.home-echipa>.container>.row>.home-echipa-nume {
  font-weight: bold;
}

.home-echipa>.container>.row>.home-echipa-poza-persoana {
  width: 150px;
  height: 150px;
  margin-bottom: 2rem;
}

.home-echipa>.container>.row>.col-md-7>.home-descriere-persoana {
  margin-top: 1rem;
  text-align: center;
  color: #585858;
  margin-bottom: 4rem;
}

.home-proiecte>.container>.row>.display-4 {
  padding-top: 2rem;
  text-align: center;
  color: #F28A00;
  font-weight: bold;
  font-size: 1.5rem;
}

.home-echipa>.container {
  background-color: #252525;
  color: #fff;
}

.proiecte-logos {
  font-size: 1.3rem;
  margin: 4rem 0;
}

.container-fluid-margin {
  padding: 2rem 0;
  width: 70%;
}

.footer-div {
  font-weight: bold;
  text-align: center;
}

.navbar-footer {
  padding: 2rem 0;
}

.email,
.phone {
  display: inline-block;
}

.form-group-custom {
  width: 50%;
  margin: 0 auto;
}


/*bootstrap navbar activate*/

@media (min-width: 1400px) {
  .navbar-expand-custom {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-custom .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-custom .navbar-nav .nav-link {
    padding-right: .5rem;
    padding-left: .5rem;
  }
  .navbar-expand-custom .navbar-collapse {
    display: flex!important;
  }
  .navbar-expand-custom .navbar-toggler {
    display: none;
  }
}


/* responsive layout */

@media screen and (max-width: 670px) {
  .margin-top-bot .mr-5 {
    margin-right: 2rem !important;
  }
  .welcome-home {
    font-size: 3rem;
    line-height: 3rem;
  }
}

@media screen and (max-width: 630px) {
  html {
    overflow: hidden;
  }
  .logos-top {
    height: 2.5rem;
  }
}

@media screen and (max-width: 400px) {
  .logos-top {
    height: 2rem;
  }
  .navbar-custom {
    padding: .2rem;
  }
  .navbar-footer {
    font-size: 0.75rem;
  }
  .home-intro-2>.row>.col-md-6>.display-4 {
    text-align: center;
  }
  .home-intro-2>.row>.col-md-6>.lead {
    text-align: center;
    width: 100%;
  }
  .logos-top-wrapper {
    display: block !important;
    margin: 0 auto !important;
  }
  .container-home {
    padding: 10rem 0;
  }
  .welcome-home {
    font-size: 2rem;
    line-height: 2rem;
  }
  html {
    overflow: hidden;
  }
  .margin-top-bot .mr-5 {
    margin-right: 1rem !important;
  }
  .email,
  .phone {
    display: block;
    margin: 0 auto;
  }
}


/*efect scroll*/

@-webkit-keyframes swing {
  15% {
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
  }
  30% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }
  50% {
    -webkit-transform: translateX(3px);
    transform: translateX(3px);
  }
  65% {
    -webkit-transform: translateX(-3px);
    transform: translateX(-3px);
  }
  80% {
    -webkit-transform: translateX(2px);
    transform: translateX(2px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes swing {
  15% {
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
  }
  30% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }
  50% {
    -webkit-transform: translateX(3px);
    transform: translateX(3px);
  }
  65% {
    -webkit-transform: translateX(-3px);
    transform: translateX(-3px);
  }
  80% {
    -webkit-transform: translateX(2px);
    transform: translateX(2px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}


/*contact.html*/

.container-centru {
  padding: 2rem 0;
}

.heading-contact {
  margin-top: 1rem;
  font-weight: bold;
  text-align: center;
  font-size: 5rem;
}

.form-contact {
  width: 50%;
  margin: 0 auto;
}

.textarea-contact,
.email-contact {
  font-size: 1rem;
}

.btn-custom {
  margin: 0 auto;
  background-color: #F28A00;
  outline: 0;
}

.btn-custom:hover {
  background-color: #F28A00;
}
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Alegreya+Sans:400,800" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
  <link rel="stylesheet" href="css/css.css">
  <title>doc</title>
</head>

<body class="m-0 d-flex flex-column justify-content-between h-100">
  <header>
    <div class="container-fluid border">
      <div class="row bg-orange">
        <div class="container-fluid">
          <div class="ml-1 margin-top-bot float-left">
            <div class="phone">
              <i class="fas fa-phone ml-5"></i>
              <span class="ml-1 bara-mica-text">074 444 4444</span>
            </div>
            <div class="email">
              <i class="fas fa-envelope ml-5"></i>
              <span class="ml-1 bara-mica-text">bestdavnic73@gmail.com</span>
            </div>
          </div>
          <div class="mr-2 margin-top-bot float-right">
            <span class="mr-5"><a href="#" class="mr-5">Locatie</a></span>
            <span class="mr-5"><a href="#" class="mr-5">Despre noi</a></span>
            <span class="mr-5"><a href="#" class="mr-5">Contact</a></span>
          </div>
        </div>
      </div>
    
  </header>
  <div class="container container-centru">
    <h1 class="heading-contact">Contacteaza-ne!</h1>
    
  </div>
  <footer>
    <nav class="navbar navbar-nav bg-orange navbar-footer">
      <div class="row footer-div">Conţinutul acestui material nu reprezintă în mod obligatoriu poziţia oficială a Uniunii Europene sau a Guvernului României.</div>
      <div class="row footer-div">Beneficiarul proiectului BEST DAVNIC73 SRL</div>
    </nav>
  </footer>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="javascript/js.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

</html>
PHP only removing specific words without affecting rest of the string

PHP only removing specific words without affecting rest of the string


By : user3252694
Date : March 29 2020, 07:55 AM
may help you . I'm using PHP to filter my title to remove the word "Tag:" inside and it is working fine, however when my following word starts with "T" it will instantly be removed as well. , Try this. it will returns only Teacher
code :
 $str = "Tag: Teacher"; 

 $str = str_replace("Tag:", "", $str);
 echo $str;
Badly affecting performance in populating ManyToMany field values in rest api (using django rest framework)

Badly affecting performance in populating ManyToMany field values in rest api (using django rest framework)


By : Madhuri Alawa
Date : March 29 2020, 07:55 AM
With these it helps I always use django-debug-toolbar to debug my queryset to find bottleneck/duplicate query in my project. Django orm always using lazy load to retrieve related fields from database. You can change this default behavior of your queryset by eager load your many to many field using prefetch_related.
Related Posts Related Posts :
  • Hide specific elements from html using css
  • how to align the arrow in menu item?
  • How do I create a trapezoidal button using CSS?
  • Background position seems to be inaccurate
  • CSS background color is overruled by the background image
  • Oblique or twisted border shape
  • Overflow in div tag doesn't work
  • How to show the vertical image into horizontal manner using HTML and CSS?
  • css3 animation issue move div to left and move it back
  • HTML <code> - get rid of newlines
  • Vertical Align Two Spans (Different font size)
  • Position fixed not working with video poster
  • Having issues placing html buttons side by side in a form
  • how to center text in the middle of the page
  • Sublime Autocompletion for HTML using Emmet inside .sublime-autocompletion file
  • Align bottom wrapped text at the left of an image
  • I'm trying to get :after:hover to work
  • Header and Picture won't Display Correctly
  • SVG stacking, anchor elements, and HTTP fetching
  • Positioning two elements on opposite ends of a 100% with header
  • How to overlay an image inside an image with HTML, CSS
  • Selected date isn't kept in select box
  • How to change background colour of entire div on hover?
  • Two gradients with two distinct sections with just one div element
  • Indent even rows of hexagons in CSS
  • Unwanted filled letters in webpage
  • Mask password character size too small
  • Show div #2 while hovering relative div #1 with translition effect in one container
  • Stacking Tables for a responsive HTML email
  • Hyperlink button created via text/css
  • Checkboxes aligned in a row
  • HTML <title> tag appearing on page
  • I need some assistance with Div Tags
  • CSS Navigation Bar is not horizontal and has wrong colours
  • Background-image width & height 100%
  • Set div height to window height
  • Image/Link alignment issue with bottom navbar
  • CSS hover bubble does not seem out
  • Centering media object on page using Bootstrap
  • Fading out/color overlay on background image
  • Load video after clicking a button or link inside div and stack the trigger, poster image, and video
  • Using Django template tag in <img> tag
  • What are the drawbacks of using 'Mega CSS Sprites' for mobile site?
  • VBScript in HTML (Inline): How to refresh and quit
  • CSS effect works in Chrome but not IE 11
  • HTML Word Wrap is not working properly?
  • Clicking a button within an IE table
  • Have margin between my cells
  • Bootstrap 3 Site layout image grid
  • How can I align divs in a row rather than vertically?
  • How to use emoticon icon in HTML in following scenario?
  • Keep the alignment of my block
  • CSS pseudo selector before with content does not work on html input tag
  • HTML 5 - ie8 moves to quirks mode after page refresh (F5)
  • text-shadow applying to all the text on website?
  • Span tag with display:inline rendering as display:block
  • Center vertically a rotated element
  • Markdown image not shown
  • Text pushed down after inserting images - need to vertically align text
  • Center align an image css when resizing window
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org