- This topic is empty.
-
AuthorPosts
-
April 25, 2018 at 1:15 pm #270253SteveLovellParticipant
How would I write up the CSS and HTML for a logo and some text next to it like this:
http://www.albanydesign.co.uk/images/titles/map_title_bradford_city.png
i.e. to be vertically and horizontally aligned side by side in a suitable div?
Here’s some code:
https://codepen.io/SteveLovell74/pen/PezVjWI’ve some how managed to get a one line version together, but I’m incredibly useless at this stuff:
http://www.albanydesign.co.uk/testes.htmApril 25, 2018 at 1:37 pm #270254tomnoble92ParticipantHad a spare 5 minutes so I created it for you.
https://codepen.io/tomnoble92/pen/VxjgGa
Used floats so it has great browser coverage.
Have a look at the code and see how it works.
It’s a good start anyway you can tweak it further :)
April 25, 2018 at 2:14 pm #270255SteveLovellParticipantHi, Thanks Tom. It’s not working quite as expected after chucking it into my website, but it does look like a good starting point for me to try an work on. I’ll try to give the wrapper the full page width (or centre it) and make the logo and text meet in the middle. I’ve got them separately aligning left and right at the moment after widening the div. Anyway, I think you’ve put me on the right track. :)
April 25, 2018 at 10:11 pm #270257MamunParticipantHi @SteveLovell,
If you want to place the logo vertically and horizontally centered then you can try display: flex like this.
.wrapper {
display: flex;
height: 100vh; /* Height must 100% to keep the child vertically centered */
}.child {
margin: auto; /* This will keep the child always to the center both vertically and horizontally */
}There are more solutions but this seems to be the simplest. You can try this also. It serves the purpose.
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}April 26, 2018 at 12:01 pm #270280tomnoble92ParticipantYeah only whipped it up real quick…loads of ways to can do it….for example Manum’s idea.
However that may be abit complex for you.
April 27, 2018 at 10:42 am #270325SteveLovellParticipantAfter re-starting my efforts and far more effort and experimentation than should be expected for entry level stuff, I eventually came up with what I needed:
https://www.w3schools.com/code/tryit.asp?filename=FQRQKCP5TH8D
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.