jquery - Centering a div with a full width/height border -

-

first off, here's jfiddle: https://jsfiddle.net/nulyq28d/

what trying make white border expand entire height of screen , center content inside box, both horizontally , vertically. background changing 3 images (instead of solid black) changing between each other. leaving white border part of actual images weird. want separate images. 

<body id="home-page"> <main>     <div>         <p>lorem ipsum dolor sit amet, duis eros posuere sit, volutpat nec massa sit ac, amet pede eu justo, suspendisse adipiscing                  viverra. amet quisque, justo elit dui orci aliquam praesent, et condimentum nibh. ultricies cubilia eu fringilla elementum                  erat, arcu metus dictum id feugiat, ultricies interdum elementum, magna nec urna sit non condimentum a, massa tempus nibh.                  eros turpis in erat sed, adipiscing molestie, eros arcu. est @ est nec augue</p>     </div> </main> 

body#home-page { background-color: #000000; }  body#home-page main { display: table; padding: 20px; width: 88%; border: 8px solid #fff; margin: 20px; }  body#home-page main div { text-align: center; margin: 0 auto; vertical-align: middle; width: 50%; }  body#home-page main div p { font-size: 12px; color:#fff; line-height: 1.4; letter-spacing: 1px;  }

things have tried far include: - absolute positioning content. pushed outside border box , looked awful. - set height won't work since needs responsive.

i think other option @ point capture height of screen through jquery , set height of main height. before wondering if there way through css

vertical alignment acheived in chrome following code

height: 100%; display: flex; align-items: center;

for .main div, box-sizing: border-box; added can use 100% width.

html, body need 100% height.

here updated fiddle - https://jsfiddle.net/afelixj/nulyq28d/7/

please check in chrome.


Comments

Post a Comment

Popular posts from this blog

Java 3D LWJGL collision -

-
i making 3d java game lwjgl library, , wondering how add collision detection, player not go through models. i using obj models. here objloader class, loads models: package renderengine; import java.io.bufferedreader; import java.io.file; import java.io.filenotfoundexception; import java.io.filereader; import java.util.arraylist; import java.util.list; import models.rawmodel; import org.lwjgl.util.vector.vector2f; import org.lwjgl.util.vector.vector3f; public class objloader { public static rawmodel loadobjmodel(string filename, loader loader){ filereader fr = null; try { fr = new filereader(new file("res/"+filename+".obj")); } catch (filenotfoundexception e) { system.err.println("couldn't load file!"); e.printstacktrace(); } bufferedreader reader = new bufferedreader(fr); string line; list<vector3f> vertices = new arraylist<vector3f...
Read more

spring - SubProtocolWebSocketHandler - No handlers -

-
i have ugly error during deploying spring app on jboss. 18:11:16,025 error [org.apache.catalina.core.containerbase.[jboss.web].[default-host].[/consumer]] (msc service thread 1-7) exception sending context initialized event listener instance of class org.springframework.web.context.contextloaderlistener: org.springframework.context.applicationcontextexception: failed start bean 'subprotocolwebsockethandler'; nested exception java.lang.illegalargumentexception: no handlers @ org.springframework.context.support.defaultlifecycleprocessor.dostart(defaultlifecycleprocessor.java:176) [spring-context-4.1.3.release.jar:4.1.3.release] @ org.springframework.context.support.defaultlifecycleprocessor.access$200(defaultlifecycleprocessor.java:51) [spring-context-4.1.3.release.jar:4.1.3.release] @ org.springframework.context.support.defaultlifecycleprocessor$lifecyclegroup.start(defaultlifecycleprocessor.java:346) [spring-context-4.1.3.release.jar:4.1.3.release] @ org.s...
Read more

methods - python can't use function in submodule -

-
my folder structure this: pythonstuff/ program.py modulea/ __init__.py foo.py bar.py here's code bar.py : def hello(): print("hello, world!") here's code program.py : #!/usr/bin/env python3 modulea import bar bar.hello() i run $ python3 program.py somehow error: file "program.py", line 3, in <module> bar.hello() attributeerror: 'module' object has no attribute 'hello' edit: __init__.py file empty. edit2: after trying realized had bar.py in root directory contained hello() method. bar.py in modulea/ directory empty. add it import os __all__ = [] module in os.listdir(os.path.dirname(__file__)): if module != '__init__.py' , module[-3:] == '.py': __all__.append(module[:-3]) the init .py files required make python treat directories containing packages; done prevent directories common name, such string, unintentionally hiding v...
Read more