Centering an Image in a Paragraph

Center image using text-align center?

That will not work as the text-align property applies to block containers, not inline elements, and img is an inline element. See the W3C specification.

Use this instead:

img.center {    display: block;    margin: 0 auto;}

<div style="border: 1px solid black;"><img class="center" src ="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">
</div>

Centering an image in a paragraph

Found an answer that works quite well available at:
http://www.alistapart.com/articles/crosscolumn/

Vertically align text next to an image?

Actually, in this case it's quite simple: apply the vertical align to the image. Since it's all in one line, it's really the image you want aligned, not the text.

<!-- moved "vertical-align:middle" style from span to img -->
<div>
  <img style="vertical-align:middle" src="https://via.placeholder.com/60x60" alt="A grey image showing text 60 x 60">
  <span style="">Works.</span>
</div>

How to align an image next to a paragraph

so thats some sloppy code you have there, but check out this jsfiddle for an example using float:

http://jsfiddle.net/tH2qc/

And here's something loosly based on your code:

http://jsfiddle.net/zZkpw/

Vertically align an image next to paragraph

Use display: inline-block; for vertical-align.

CSS

img {
  display: inline-block;
  margin-right: 10px;
  vertical-align: middle;
}

.content-holder {
  display: inline-block;
  vertical-align: middle;
}

HTML

<div class="church-admin-calendar-widget-item">
  <img width="75" height="60" src="http://dummyimage.com/75" />
  <div class="content-holder">
    <p  class="ca_event_detail" >
      Blah Blah<br/>
      Blah Blah<br/>
      Blah Blah<br/>
      Blah Blah<br/>
      Blah Blah<br/>
      Blah Blah<br/>
      Blah Blah<br/>
      Blah Blah<br/>
    </p>
  </div>
</div>

DEMO

Alignment of image an p tag

I have tried to maintain your styling but have removed all inline styles.

#main{    margin: 42px auto;    position:relative;    background:rgba(16,16,17,0.70);    width:90%;    box-shadow: 3px 3px 2.5px #888888;    border-radius:5px;}   
h1 {    text-align: center;    color: #fff;    font-size: 2em;}
.red {    color: red;}
.map{    display:inline;    margin: 0 5px 0;    border-radius:5px;    border-style:solid;    border-width:2px;    border-color:#fff;}
.address {    display:inline;    vertical-align: top;}

<div id="main"><h1><span class=red>Contact</span> Us</h1><img class=map src="http://lorempixel.com/200/200" title="Image of Map for Krazie Needles." /><p class=address>45 Station Road</p></div>

horizontal align image and paragraph

Using separate div for your logo and your text makes it much cleaner:

<header>
<div class="logo">
  <img src="pictures/logo.png" alt="logo"/>
</div>

<div class="title_div">
 <h1>Title</h1>
 <h2>Subtitle</h2>
</div>
</header>

CSS:

header{
 float:left;
}

.logo{
 float:left;
 margin:20px;
}
.title_div{
 float:left;
}

Note: Just a side note that you have very improper use of HTML. P tag is for paragraph, H1 is for headings, so you cant put heading inside a P tag. Re-structure your HTML.