1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to center this div?

Discussion in 'CSS' started by Divvy, Feb 23, 2018.

  1. #1
    Hello guys,
    SEMrush
    Can someone give me a little help?

    I need to center this content:
    https://thevrporndude.com/videos/ (ADULT CONTENT)
    Screenshot: https://monosnap.com/file/VBmZnEUZRme6zv7KP1CRwRkyPg6C1H

    Html code:
    <div class="row">
    <div class="col-md-12">
    <div class="maddos-link-content">
    <div class="crp_related">
    <ul>
    <li></li>
    </ul>
    </div></div></div></div>
    Code (markup):
    I've tried:
    .crp_related {
    margin-left: auto;
    margin-right: auto;
    display: table;
    }
    Code (markup):
    And:

    .crp_related ul {
    margin-left: auto;
    margin-right: auto;
    display: table;
    }
    Code (markup):
    And:

    .maddos-link-content .crp_related {
    margin-left: auto;
    margin-right: auto;
    display: table;
    }
    Code (markup):
    But nothing seems to work...

    What I am missing?

    Thanks in advance! :)
     
    Solved! View solution.
    Divvy, Feb 23, 2018 IP
    SEMrush
  2. Blizzardofozz

    Blizzardofozz Well-Known Member

    Messages:
    132
    Likes Received:
    9
    Best Answers:
    1
    Trophy Points:
    118
    #2
    Maybe I don't understand but looks centered to me. This is even in a bootstrap container class that is centered.
     
    Blizzardofozz, Feb 23, 2018 IP
  3. Divvy

    Divvy Well-Known Member

    Messages:
    719
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    128
    #3
    Divvy, Feb 23, 2018 IP
  4. #4
    Your problem is not with the div but with the list items. Replace float: left with display: inline-block for the li tag and put tex-align: center for the ul tag.
     
    Blizzardofozz, Feb 23, 2018 IP
  5. Divvy

    Divvy Well-Known Member

    Messages:
    719
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    128
    #5
    Like this?

    .crp_related li {
    display: inline-block;
    }
    
    .crp_related ul {
    text-align: center;
    }
    Code (markup):
    Didn't worked... have you tried?

    Btw, thank you for helping me.

    EDIT:
    ---------------------------------------
    I think I did wrong, I'm trying again.
     
    Divvy, Feb 23, 2018 IP
  6. Blizzardofozz

    Blizzardofozz Well-Known Member

    Messages:
    132
    Likes Received:
    9
    Best Answers:
    1
    Trophy Points:
    118
    #6
    Blizzardofozz, Feb 23, 2018 IP
  7. Divvy

    Divvy Well-Known Member

    Messages:
    719
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    128
    #7
    Yeahhh working perfectly now, thank you bud, I couldn't do it without your help :) :D
     
    Divvy, Feb 23, 2018 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,663
    Likes Received:
    1,563
    Best Answers:
    225
    Trophy Points:
    515
    #8
    Still broken here for me -- but that's pretty much the whole layout broken since it's still got too many of bootcrap and turdpress' failings -- like the static style in the markup, pixel metric mentality, titles for nothing, absolute URI's for nothing... hardly a shock it's got 35k of markup to deliver 673 bytes of text content and twelve content images -- around 5k's job.

    Oh and seriously, easy up on the src-sets. Your showing photo's... they're more forgiving, primary and double-resolution should be sufficient.
     
    deathshadow, Feb 26, 2018 IP
  9. Divvy

    Divvy Well-Known Member

    Messages:
    719
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    128
    #9
    Hey, thank you for your response. It looks good in my end..
    What issues are you seeing? If possible, can you send me a screenshot?

    Thanks!
     
    Divvy, Feb 26, 2018 IP
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,663
    Likes Received:
    1,563
    Best Answers:
    225
    Trophy Points:
    515
    #10
    Not much to send apart from the fact that the media queries and/or width changes aren't kicking in here, but there's no left-right scrollbar. It's like the widest of your layouts is stuck open and I'm only getting the left-half of the page. It seems to be a chromium/vivaldi thing when the window isn't full size -- and is a COMMON problem I've come across with websites that use bootcrap. ANOTHER of the MANY reasons I'm constantly pissing on it and its use.

    Interestingly regular Chrome doesn't do it... but Opera does too, but only when the window isn't full screen. It's almost like it's detecting screen size instead of windows size. Yeah, if I switch my tabs to being at the top instead of the side in vivaldi and move my taskbar to the bottom it kind-of works semi-correctly.... so in some browsers it's using screen size instead of window size, and there's no horizontal scroll for it being bigger than the window.

    AGAIN why when people bring sites built with bootstrap to me, I tell them to pitch that garbage in the trash. I mean 35k of markup doing 5k's job, 324k of CSS spread out over 18 files doing 32k in one file's job, half a megabyte of scripttardery spanning 16 files on a website I probably wouldn't even be wasting the complexity or bandwidth of JavaScript on... and if I did it probably wouldn't take more than 48k in 2 files... etc, etc.

    Hardly a shock that despite my spanky new 120mbps downstream it still takes 15 seconds to load due to handshaking time between here and your hosting. I'd hate to see how long a crappy connection would take.

    Basically, it's such a big convoluted mess fixing any bugs in layout or functionality will be agonizing. You know it's bad when on a PORN site you're blowing more bandwidth on the JavaScript and CSS than you are the IMAGES!

    But that's often the result of when bootcrap meets turdpress, you start rooting around in its guts and by the time you've even figured out what it's doing, you feel like you need a crate of hand sanitizer to bathe in.
     
    Last edited: Feb 26, 2018
    deathshadow, Feb 26, 2018 IP