Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
  • Aug 17 09:32
    User @bjorno43 unbanned @linkin-park
  • Jun 20 21:19
    @bjorno43 banned @shenerd140
  • Apr 25 17:13
    @mstellaluna banned @cmal
  • Jan 08 22:05
    @mstellaluna banned @dertiuss323
  • Nov 07 2018 04:42
    User @texas2010 unbanned @ows-ali
  • Nov 02 2018 16:25
    @texas2010 banned @ows-ali
  • Oct 12 2018 05:50
    @bjorno43 banned @NACH74
  • Oct 05 2018 23:02
    @mstellaluna banned @JomoPipi
  • Sep 16 2018 12:21
    @bjorno43 banned @yash-kedia
  • Sep 16 2018 12:16
    @bjorno43 banned @vnikifirov
  • Sep 05 2018 08:12
    User @bjorno43 unbanned @androuino
  • Sep 05 2018 07:38
    @bjorno43 banned @androuino
  • Aug 23 2018 16:57
    User @bjorno43 unbanned @rahuldkjain
  • Aug 23 2018 16:23
    @bjorno43 banned @rahuldkjain
  • Jul 29 2018 14:13
    User @bjorno43 unbanned @jkyereh
  • Jul 29 2018 01:00
    @bjorno43 banned @jkyereh
  • Jul 10 2018 22:09
    @bjorno43 banned @manafn
  • Jul 06 2018 15:20
    @texas2010 banned @imlegend19
  • Jul 03 2018 12:28
    @bjorno43 banned @vbvmatta
  • Jun 29 2018 13:54
    @bjorno43 banned @OGTechnoBoy
Jacob Pieczynski
I personally always use margin: auto; for that kind of thing
I'm trying the margin: auto that both of you suggest (it's not an inline image) and it doesn't seem to center.
Daniel Slatkin
Can you copy and paste the code inside ``` marks?
They're "backticks" (the key next to 1 on the keyboard)... If you use three backticks before/after code it formats it nicely
use the backpacks here or in my html?
haha, backticks (darn autocorrect)
Daniel Slatkin
Here if you're pasting code

```<div style="background-color: silver" class="picture-border">
<img style="margin-left: auto; margin-right: auto" class="smaller-picture" src="https://github.com/KatECN11/hello-world/blob/master/Caroline%20Herschel.jpg?raw=true" alt="Caroline Herschel studying an astronomical cataloge.">

<h2 style="font-size: 20px">"The eyes of her who is glorified here below turned to the starry heavens." -inscription on her headstone.</h2>

First I had the margin-left: auto, etc in my css for img but that didn't work so I tried it the above way
Daniel Slatkin
Okay sorry didn't clarify or forgot something about images when telling you about margin autos
So elements that display in HTML are generally either "inline"-level elements or "block"-level elements
You probably assumed I have more knowledge than I do. :)
So mine are inline level and the margin: auto won't work?
Daniel Slatkin
Images are by default an inline-level element, so text will wrap around them... Which is also why you can't set a default margin on them. You can force them to be block-level elements by adding a display: block property to the image's style
Yep - but you can force it to be block.
Examples of inline elements: <strong>...</strong>, <a href="...">...</a>, etc.
Example of block-level elements: <h1>...</h1>, <p>...</p>
Text-input fields and buttons are also inline elements
And by default images are too, unless you change them to be blocks with display: block
Yes! That was all very helpful! Now I know two ways to center the image! Thank you for your help!
Are block-level elements defined by elements that skip a line and start a new paragraph essentially?
Daniel Slatkin
That's one thing that block-level elements do as a result of how they behave
I have so much to learn!
Daniel Slatkin
It's better to think as block-level elements as elements that "expand" left and right to fit the entire width of their "parent" block level element
hmm... that helps give more perspective
Pink, blue, green are block-level elements (pink I've set the width to 600px). Blue and green expand to fit the width of the parent element since they're block-level. Purple is an inline element.
Sorry I'm sharing so much! Just spent forever not knowing the difference between block and inline elements haha, and wish someone explained sooner to me.
NO! I super appreciate it!!!
abraham anak agung
Yes FCC should explain it @DSlatkin i didn't know it too after someone told me about that. Nice explanation. Thanks.
padunk sends brownie points to @dslatkin :sparkles: :thumbsup: :sparkles:
:cookie: 116 | @dslatkin |http://www.freecodecamp.org/dslatkin
Daniel Slatkin
Yeah - it had me curious and I'm trying to find a good picture online of block vs inline elements, and can't find anything (except this: https://goo.gl/5TC4dG) haha.
I don't find that image helpful at all, though I like the effort (if anything adds to the confusion since a block-level element can expand to fit its parent block-level element)
abraham anak agung
I am doing twitch api app and ran into a styling problem. I cannot for the life of me figure out how to adjust the anchor tags to vertically center them in their divs via css, or really how to move them vertically at all. Padding is working horizontally, but when I try padding top or bottom, the anchor tag won't move. I see the padding when I use inspector in chrome, but it does not actually do anything. Any help would be greatly appreciated. This is the github pages to the actual app(very bare bones at the moment) https://geoffrymichael.github.io/twitch-api-app/. And here is the repository. In the styles.css I am trying to manipulate the anchor tags that I have given a class of .links. https://github.com/geoffrymichael/twitch-api-app/tree/master/docs
Ken Haduch
@KatECN11 - one site that you'll probably want to bookmark is the css-tricks website. For example, you'll find pages like this one: https://css-tricks.com/almanac/properties/d/display/ that if you take the time to study them will show you a lot of detail about HTML and CSS.
Phuc Le
@geoffrymichael you can add display: flex to your .stream class and then on img and .link add align-self: center
get rid of your padding-bottom on .link if you do that method
flexbox solves a lot of problems with vertical-alignment
but took me a while to wrap my head around it
Ken Haduch
@geoffrymichael - I agree with @phuchle about going with flexbox. I think that prior to the implementation of flex, using tables was the only HTML structure that supported vertical centering. Another CSS-tricks page for everything about centering: https://css-tricks.com/centering-css-complete-guide/
@phuchle @khaduch. Okay, good to know this is something finicky and wasn't just me. Of course now that I've enabled flex, my text under the streamer icon got thrown from under icon, but at least I can start toying around now. I've done a little flex box before.
Ken Haduch
@geoffrymichael - you can selectively use flex on the portions where you need it. If part of your page was good as it was, keep it without flex.
@khaduch both the anchor tag and text were in the same div with a little logo icon. I was looking to have text under the logo and then an anchor tag to the right of the logo. I think with flex box I can start tinkering hopefully, or maybe I will separate the content into different divs.
German Gamboa Gonzalez
Ravi Kishore Thella
@germangamboa95 cool :smile: :smile:
Who is up at this time of night?